Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to achieve responsive Web design through CSS3 Media Query. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

We will start from the previous introduction of the "flexible layout structure", through a specific example to learn in depth.

Today's screen resolutions range from 320px (iPhone) to 2560px or even higher (large monitors). In addition to using traditional desktops, users are increasingly browsing the page through tablet devices such as mobile phones, netbooks and iPad. In this case, the fixed-width design will become more and more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted according to different devices and screen resolutions. Next, we will learn how to use HTML5 and CSS3 Media Queries (Media query) related technologies to achieve cross-device and cross-browser responsive Web design.

Sample effect preview

First of all, let's take a look at the final demonstration of this example. Open the page, drag the browser border, slowly shrink the window, and observe how the page structure and element layout automatically respond to changes in width.

More examples

I (the original author) designed some WordPress templates using media query, such as Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

Overview

We set the parent container width of the sample page to a fixed 980px, which is suitable for any resolution greater than 1024 pixels for desktop browsing environments. We use media query to monitor the resolution of devices whose width is smaller than 980px, and change the width setting of the page from "fixed" to "liquid", and the width of layout elements is adjusted according to the size of the browser window. When the width of the visual part is further reduced below the 650px, the container width of the main content section will increase to the full screen, while the sidebar will be placed below the main content section, and the whole page will become a single-column layout.

HTML code

We will focus on the main layout of the page and use HTML5 tags to implement these structures more semantically, including headers, main content sections, sidebars, and footers:

Demo Site Description Home blog post widget footer

HTML5

IE is an eternal topic; previous versions of IE9 do not provide support for the HTML5 tags we use. The current solution is still to use html5.js to help these older versions of IE browsers create HTML5 element nodes. Call the JS file in our page HTML code:

CSS

HTML5 block-level element style

First of all, there is still the issue of browser compatibility. Although we can already create HTML5 element nodes in an earlier version of IE, we still need to do some work on styling to declare these "new" elements at the block level:

Article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

CSS of main structure

Ignoring the details, we still focus on the big problems. As mentioned in the previous overview, by default the page container has a fixed width of 980 pixels, the header has a fixed height of 160 pixels, the main content section (content) has a width of 600 pixels and floats to the left, and the sidebar (sidebar) floats to the right with a width of 280 pixels.

# pagewrap {width: 980px; margin: 0 auto;} # header {height: 160px;} # content {width: 600px; float: left;} # sidebar {width: 280px; float: right;} # footer {clear: both;}

Demonstration of the effect so far

So far, we have only completed the HTML and default structure style of the page structure, and of course, do not include the details of the implementation that have nothing to do with the topic. As you can see in the current demo, because no work has been done on media query, the page cannot change the layout as the browser size changes.

CSS3 Media Query

Finally getting down to business. First, we need to call the css3-mediaqueries.js file in the page to help IE8 or previous versions support CSS3 mediaqueries:

Next, we will create an CSS stylesheet and call the following in the page:

When the width of the visible part of the browser is greater than 650px and less than 980px (liquid layout)

◆ sets the width of the pagewrap to 95%

◆ sets the width of the content to 60%

◆ sets 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 width of the visible part of the browser is less than 650px (single column layout)

◆ sets the height of header to auto

◆ absolutely locates searchform in the position of top 5px.

◆ sets the positioning of main-nav, site-logo and site-description to static

◆ sets the width of content to auto (the width of the main content section will be extended to full screen) and cancels the float setting

◆ sets the width of sidebar to 100% and cancels the float setting

Media screen and (max-width: 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: 00 15px; position: static;} # content {width: auto; float: none; margin: 20px 0;} # sidebar {width: 100%; float: none; margin: 0;}}

When the width of the visual part of the browser is less than 480px

480px is the width of the horizontal screen of the iPhone. When the width of the visual part is less than this value, we need to make the following adjustments:

◆ disables automatic font resizing for html nodes. By default, iPhone enlarges font sizes that are too small, and we can adjust them through the-webkit-text-size-adjust attribute.

◆ sets the font size in main-nav to 90%

Elastic picture

We need to set max-width: 100% and height: auto for the picture to make it elastic. For IE, a little extra work is still needed:

Img {max-width: 100%; height: auto; width: auto\ 9; / * ie8 * /}

Elastic embedded video

Similarly, for video, we also need to set max-width: 100%, but Safari does not support this attribute of embed very well, so we use width: 100% instead:

.video embed, .video object, .video iframe {width: 100%; height: auto;}

Initialization scaling in iPhone

By default, the Safari browser in iPhone automatically zooms the page to fit the screen size. We can use the following meta settings to set the default width of the device as the width of the visual part of the page in the Safari and to disable initial scaling.

Final effect demonstration

The final demonstration of this example is exactly what we saw at the beginning of this article; also remember to use a variety of typical mobile devices (iPhone, iPad, Android, Blackberry, and so on) to verify the mobile version of the page when conditions permit.

Summary of main points

Media Query JavaScript

For browsers that do not yet support media query, we will call css3-mediaqueries.js in the page

CSS Media Queries

One of the keys to adaptive page design is to use CSS to adjust the page layout structure according to the change of 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 realized through max-width: 100% and height: auto.

Img {max-width: 100%; height: auto; width: auto\ 9; / * ie8 * /}

Elastic embedded elements (video)

The elasticity of embedded elements is achieved through width: 100% and height: auto.

.video embed, .video object, .video iframe {width: 100%; height: auto;}

The problem of automatic font size adjustment

Disable automatic font size adjustment of Safari in iPhone through-webkit-text-size-adjust:none

Html {- webkit-text-size-adjust: none;}

The problem of page width scaling

After reading the above, do you have any further understanding of how to implement responsive Web design through CSS3 Media Query? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.