The media query can be directly specified in your stylesheet. Incase it is evaluated to true, the CSS properties contained by the query are applied. This is the basis of a responsive design.Ī media query basically involves a media type (screen or print) and a (true or false) conditional expression involving media features (like width, height or color). Using media queries we can have different style rules for different media types. For this we would have to use media queries. Responsive text undertakes providing an appropriate text size depending on the viewing device. This can be optional depending on your preference */ * assures that the the maximum height of the image will not be bigger than the size of the containing screen. * assures that the the maximum width of the image will not be bigger than the size of the containing screen */ Images can be made responsive by adding the following properties to the ‘ img’ tag (which means that all images will have these properties): Responsive image implies that images will be scaled in proportion to the display device or browser screen. * initial-scale and width ensure that the page is scaled in proportion to the device width */ To avoid this from happening, you need to set the viewport information to compel the device to display the information proportionately. Start by setting the viewport information:Ī viewport is area on the screen where the page is displayed, without the scrollbars and browser navigation bar. Usually when mobile devices display a page from your site, they tend to display a zoomed out version of the full page. In WordPress sites, you need to add a viewport meta tag in the header.php file, and add the style properties in the style.css, of your theme. ![]() Responsive web designing involves adding viewport meta information and simple style properties to HTML tags. With the increase in number of mobile and tablet browsing, it has become the norm to make images and text in a site responsive. ![]() Optimal viewing experience consists of easy reading and navigation, with minimum panning, scrolling and resizing. Responsive web design is a web designing method, which is based on providing a resolution independent, optimal viewing experience to the viewer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |