Go CSS3 Media query for responsive layouts

In response to the layout, I believe we all have a certain understanding, responsive layout is a popular design concept this year, with the prevalence of mobile internet, in order to solve today's wide range of browser resolution and different mobile device display, the designer proposed a responsive layout design. Today, let's talk about the responsive layout, which includes what is responsive layout, the pros and cons of responsive layouts, and how responsive layouts are designed (with CSS3 Media query for responsive layouts). First, what is the responsive layout? Responsive layout is a concept presented by Ethan Marcotte in May 2010, in short, that a website can be compatible with multiple terminals-rather than making a specific version for each terminal. This concept was created to address mobile internet browsing. Responsive layouts can provide a more comfortable interface and a better user experience for users of different terminals, and with the current popularity of large-screen mobile devices, the trend is not too much to describe. As more and more designers adopt this technology, we see not only a lot of innovation, but also some forming patterns. Ii. what are the advantages and disadvantages of the responsive layout? Advantages: High flexibility in face of different resolution devices Can quickly solve multi-device display adaptation problems Disadvantages: Compatible with a wide range of equipment, low efficiency and high workload Code is cumbersome, there will be hidden useless elements, loading time extended In fact, this is a compromise of the design of the solution, many factors affect the best results To a certain extent, change the original layout structure of the site, there will be user confusion situation Thirdly, how to design the responsive layout? What do we know about responsive layouts, and how should we design them in our actual projects? In the past when we design the site will be affected by the compatibility of different browsers, but also to a different size of equipment, how should we settle down? There is a need to have a solution, hehe, when it comes to responsive layout, you have to mention the media query in CSS3 (media queries), this is a good thing, easy-to-use, powerful, fast ... Media Query is a great tool for making responsive layouts, and with this tools, we can easily and quickly produce a wide variety of practical and powerful interfaces. The next step is to get an in-depth look at media Query. 1. What is media query in CSS? Style sheet rules are defined by different media types and conditions. Media queries allow CSS to work more precisely on different media types and different conditions for the same media. Most media features of media queries accept Min and Max to express "greater than or equal to" and "small and or equal". Such as: Width will have min-width and max-width media queries can be used in CSS @media and @import rules, can also be used in HTML and XML. With this tag property, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used. 2. What values can media query get? Device width and Height device-width,device-heigth display screen/tactile device. The width and height of the render window width,heigth display screen/haptic device. The handheld direction of the device, transverse or vertical orientation (portrait|lanscape) and printer. Screen ratio aspect-ratio dot matrix printer. Device ratio device-aspect-ratio-dot matrix printer. The object color or color list color,color-index the display screen. The resolution of the device is resolution. 3. Grammatical structure and usage @media Device name only (select condition) not (pick condition) and (device selection condition), device two {srules} Example one: Using @media in Link: <link rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:480px), only screens and (max-device-width:48 0px) "href=" Link.css "/> The above use only can be omitted, limited to the computer monitor, the first condition max-width refers to the maximum width of the rendering interface, the second condition max-device-width refers to the maximum width of the device. Example two: inline @media in a style sheet: @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (Orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { Srules} In example two, the computer display resolution (width) is set to be greater than or equal to 1024px (and the maximum visible width is 989px), the screen width in 480px and the following handheld devices, the screen width in 480px and horizontal (that is, 480 size parallel to the ground) of the handheld device placement , the screen is large or equal to 480px less than 1024px, and vertical placement of the device's CSS style. As can be seen from the above example, the character putting is concatenated with a space, the selection condition is enclosed in parentheses, and the Srules is a compatible set of style sheets, enclosed in brackets. Only (limited to a certain device, can be omitted), and (logical AND), not (excluding a certain device) is a logical keyword, a variety of devices separated by commas, which inherits the basic CSS syntax. 4. Available Device name parameters: 5. Logic keyword: 6. Available Device name parameters: 7. Test Media Queries Finally, we need to test the media queries we just designed to test the effects of media queries on different devices, and use a browse tool to verify the display on different sizes of screens, and here's a good online tool for everyone – Responsivator, it can simulate a variety of devices such as the iphone, and can also customize the display of different sizes of the screen, only need to enter a URL or even a local URL (such as: HTTP://127.0.0.1/), You can see how your site looks in different sizes of screens. 8. Implement responsive layout design through media queries Well, we know what media Query is, so let's use it in a responsive layout design project. The design idea is very simple, first defines the fixed width under the standard browser (if the standard browser resolution is 1024PX, then we set the width to 980px), then uses the media query to monitor the browser size change, when the browser resolution is less than 1024px, The page's width is set to a percentage display by using the Media query preset style sheet, so that the structure elements of the page are adjusted according to the size of the browser. Similarly, when the viewable area of a browser changes to a value (assuming 650px), the structure elements of the page are adjusted according to the cascading style sheet preset by media query. Take a look at our example: /* When the viewable area of the browser is less than 980px */ @media screen and (max-width:980px) { #wrap {width:90%; margin:0 auto;} #content {width:60%;p adding:5%;} #sidebar {width:30%;} #footer {padding:8% 5%;margin-bottom:10px;} } /* When the viewable area of the browser is less than 650px */ @media screen and (max-width:650px) { #header {Height:auto;} #searchform {position:absolute;top:5px;right:0;} #content {width:auto; float:none; margin:20px 0;} #sidebar {width:100%; float:none; margin:0;} } Through the above we can monitor the visual area of the browser changes is the time of our page structure elements will also change, of course, you can set up a few more dimensions of the monitoring cascading style sheet, which can be based on different sizes of devices to respond to the layout. For a better display, we tend to format some of the initial values of CSS properties: /* Disable the Font size auto-adjust for safari in iphone */ HTML { -webkit-text-size-adjust:none; } /* Set HTML5 element to block */ Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section { Display:block; } /* Set up adaptive adjustments for picture videos */ IMG { max-width:100%; Height:auto; width:auto\9; /* IE8 */ } . Video embed,. Video object,. Video iframe { width:100%; Height:auto; } The last thing to note is to add the following sentence between the head <meta name= "viewport" content= "width=device-width; initial-scale=1.0 "> Meta Viewport This property is a declaration that sets the original size display and whether to scale on a mobile device. Parameter settings: Width of the Width–viewport The height of the Height–viewport initial-scale– Initial zoom ratio minimum-scale– allows the user to zoom to the minimum scale maximum-scale– allows the user to zoom to the maximum scale user-scalable– whether the user can manually scale Finally, for the case where media query is not supported in IE, we can use media query JavaScript to solve the problem by referencing Css3-mediaqueries.js at the head of the page. Example: <! --[if LT IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" > </script> <! [endif]-->

Go CSS3 Media query for responsive layouts