Written in the previous words: With the gradual popularization of mobile devices and the development of web technology, cross-end Web development needs will be more and more large. How to do cross-end interface adaptation on a variety of devices. We can use CSS3 's media query to achieve this. This paper mainly introduces the combination of mobile development and CSS3 to perform various resolution adaptation examples.
The responsive web design mentioned in this paper (responsive web design) is a modern method of designing Web pages, based on the CSS3 Media query feature, which adapts the Web page to different devices, i.e. automatically re-layout based on the resolution and scale of the device.
-----------
Translated from: Http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Responsive web design is now undoubtedly a big deal. If you don't understand the responsive design, take a look at my recently published list of responsive sites (Translator Note: You can take a good look at how the sites in the example show in different resolutions). For beginners, responsive design can be a bit complicated, but in fact it's easier than you think. To help you quickly understand the responsive design, I drafted a quick tutorial. You can learn the fundamentals of responsive design and media query (media Queries) in 3 steps (assuming you understand basic CSS knowledge).
First step: Meta tag (view demo)
Most mobile browsers enlarge the HTML page to a wide view (viewport) to match the screen resolution. You can use the META tag of the view to reset it. The following view labels tell the browser to use the width of the device as the width of the view and disallow the initial scaling. Add this meta tag to the
[HTML]View plain copy <meta name= "viewport" content= "Width=device-width, initial-scale=1.0" > IE8 or earlier browsers do not support media Query. You can use Media-queries.js or respond.js to add media query support for IE.
[HTML]View plain Copy <!--[if Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-me Diaqueries.js "></script> <! [endif]--> Step Two: HTML structure
In this example, I have a basic page layout that includes the header, content, sidebar, and footer. The head has a fixed height of 180 pixels, the content container is 600 pixels and the sidebar is 300 pixels.
The third step: Media query-media Queries
CSS3 Media query-Media query is the core of responsive design. It tells the browser how to render the page for the specified view width, depending on the condition.
When the view width is less than or equal to 980 pixels, the following rules will take effect. Basically, I'll set all the container widths from pixel values to percentages to make the container size adaptive.
Then specify the width of #content and #sidebar as adaptive and clear float for views less than or equal to 700 pixels, so that the containers are displayed at full width.
For cases less than or equal to 480 pixels (phone screen), set the height of the #header element to adaptive, modify the H1 font size to 24 pixels, and hide the sidebar.
You can add as many media queries as you prefer. I've only shown 3 media queries in the example. The purpose of the media query is to specify different CSS rules for the specified view width to implement different layouts. Media queries can be written in the same or a separate style sheet.
Conclusion
This tutorial wants to show you the fundamentals of responsive design. If you want more advanced tutorials, take a look at my previous tutorial: Using Media queries for responsive design.
--------------------------------------------------------------------------------------------------------------- ----------------------
Blogs from Shiyute (Http://blog.csdn.net/hfahe)
