Today's screen resolution, as small as 320px (IPhone), large to 2560px or even higher (large display), the range is great. In addition to the use of traditional desktops, users will increasingly be on mobile phones, netbooks, ipad-type tablet devices to browse the page. In this case, the fixed width of the design will appear more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted to respond to different devices and screen resolutions. Next, we'll look at how to implement a cross-device, cross-browser responsive web design with HTML5 and CSS3 media Queries (media query)-related technologies
Sample Effect Preview
First, let's take a look at the final effect demonstration of this example. Open the page, drag the browser border, slowly narrow the window, and observe how the page structure and the layout of the elements automatically respond to adjustments based on width changes.
Overview
We set the parent container width of the example page to a fixed 980px, which is suitable for any resolution wider than 1024 pixels for the desktop browsing environment. We monitor the resolution of devices with a width of less than 980px through media query and change the width of the page from "fixed" to "liquid", and the width of the layout element is adjusted as the size of the browser window changes. When the width of the visible part is further reduced to less than 650px, the container width of the main content section increases to full screen, and the sidebar is placed below the main content section, and the entire page becomes a single-column layout.
HTML code
We will focus on the main layout of the page and use HTML5 tags to implement these constructs more semantically, including the header, main content section, sidebar, and footer:
Html5.js
IE is an eternal topic, and for the HTML5 tag we use, the previous version of IE9 does not provide support. The best solution is still to help these older versions of IE browser create HTML5 element nodes through Html5.js. Call the JS file in our page's HTML code:
<!--[if Lt IE 9]> <script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script> <! [endif]--> |
Css
HTML5 block-level element style
The first is still browser compatibility issues. Although we can already create HTML5 element nodes in the lower version of IE, we still need to do some work on styling, declaring these "new" elements as Block-level:
Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section { display:block; } |
Main structure of CSS
Ignoring the details, we are still concentrating on the big issues. As mentioned in the previous "Overview", by default the page container has a fixed width of 980 pixels, a fixed height of the header section (header) of 160 pixels, a width of 600 pixels for the main content section, a left float, and a sidebar (sidebar) that floats right, The width is 280 pixels.
#pagewrap { width:980px; margin:0 auto; } #header { height:160px; } #content { width:600px; Float:left; } #sidebar { width:280px; float:right; } #footer { clear:both; |
Demo as of current effect
At the moment, we are only beginning to complete the HTML and default structure of the page structure, of course, does not include those related to the topic of the implementation of the details. As you can see in the current presentation, the page cannot change layout as the browser size changes because no media query work has been done.
CSS3 Media Query
At last, I started to say the right thing. First we need to call the Css3-mediaqueries.js file in the page to help IE8 or the previous version support CSS3 media queries:
<!--[if Lt IE 9]> <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script> |
Next, we'll create a CSS style sheet and call it in the page:
When the browser's viewable portion width is greater than 650px less than 980px (liquid layout)
Set the width of the pagewrap to 95%
Set the width of content to 60%
Set the width of the sidebar to 30%
@media screen and (max-width:980px) { #pagewrap { width:95%; } #content { width:60%; padding:3% 4%; } #sidebar { width:30%; } #sidebar. Widget { padding:8% 7; margin-bottom:10px; } |
When the browser's viewable part width is less than 650px (single-column layout)
Sets the height of the header to auto
Position the Searchform absolutely in the top 5px
Set the positioning of Main-nav, Site-logo, site-description to static
Sets the width of the content to auto (the width of the main content section expands to fullscreen), and the float setting is canceled
Set the width of the sidebar to 100% and cancel the float setting
@media screen and (Max-wi dth:650px) {#header {height:auto; } #searchform {Position:absolute; top:5px; right:0; } #main-nav {position:static; } #site-logo {margin:15px 100px 5px 0; position:static; } #site-description {margin:0 0 15px; position:static; } #content {Width:auto; Float:none; margin:20px 0; } #sidebar {width:100%; Float:none; margin:0; } } |
When the browser's visible part width is less than 480px
480px is the width of the iphone's horizontal screen. When the width of the visible part is less than this value, we need to make the following adjustments:
Disables automatic resizing of the HTML node's font size. By default, the iphone will enlarge the font size too small, and we can adjust it with the-webkit-text-size-adjust property.
Set the font size in Main-nav to 90%
@media screen and (max-width:480px) { html { -webkit-text-size-adjust:none; } #main-nav a { font-size:90%; padding:10px 8px; } |
Elastic picture
We need to set max-width:100% and Height:auto for the images to make them elastic. For IE, a little extra work is still needed:
img { max-width:100%; Height:auto; width:auto\9; /* IE8 */ |
Elastic inline Video
Similarly, for video, we also need to do max-width:100% settings, but Safari's support for embed is not very strong, so we take the width:100% instead:
. Video embed, . Video object, . Video iframe { width:100%; Height:auto; } |
Initial Zoom in iphone
By default, the Safari browser in the iphone automatically scales the page to fit the screen size. We can use the following meta settings to set the default width of the device as the viewable portion of the page in Safari and disallow the initialization of the zoom.
<meta name= "viewport" content= "width=device-width; initial-scale=1.0 "> |
Final Effect Demo
The final demonstration of this example is just as we saw at the beginning of this article, and in addition remember to use a variety of typical mobile devices (IPhone, IPad, Android, BlackBerry, etc.) to verify the mobile version of the page, if conditions permit.
Summary of Points
Media Query JavaScript
For browsers that don't yet support media query, we'll call css3-mediaqueries.js in the page
<!--[if Lt IE 9]> <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script> |
CSS Media Queries
One of the keys to implementing an adaptive page design is to use CSS to adjust the page layout structure based on the change in resolution width.
@media screen and (max-width:560px) { #content { width:auto; Float:none; } #sidebar { width:100%; Float:none; } |
Elastic picture
The elasticity of the picture is achieved through max-width:100% and Height:auto.
img { max-width:100%; Height:auto; width:auto\9; /* IE8 */ |
Elastic inline Elements (video)
width:100% and Height:auto enable the elasticity of inline elements.
. Video embed, . Video object, . Video iframe { width:100%; Height:auto; |
Problems with font size automatic adjustment
Disable the font size auto-adjust for safari in iphone via-webkit-text-size-adjust:none
HTML { -webkit-text-size-adjust:none; } |
Problem with page width scaling