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

This article focuses on "how to achieve adaptive web design", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to achieve adaptive web design"!

1. Add a viewport tag to the HTML header.

At the beginning of the website HTML file, add the viewport meta tag to tell the browser that the viewport width is equal to the device screen width and that there is no initial scaling. The code is as follows:

The code is as follows:

This code supports browsers above Chrome, Firefox and IE9, but not IE8 and browsers below IE8.

2. Add rules for different screen resolutions at the end of the CSS file.

For example, using the following code, you can automatically adjust the width of the content bar in the middle of the hidden sidebar of a web page for devices with a screen width of less than 480 pixels (such as iPhone, etc.). The following code only needs to modify the name of the tag related to Ztel Blogjol WordPress.

The code is as follows:

@ media screen and (max-device-width: 480px) {

# divMain {

Float: none

Width:auto

}

# divSidebar {

Display:none

}

}

3. Layout width uses relative width.

The overall frame of the web page can use absolute width, but the content frame, sidebar and so on should use relative width, so it is convenient to modify it for different resolutions. Of course, you don't need the relative width, so you need to add the width of each div to the small screen in @ media screen and (max-device-width: 480px), which is actually more troublesome.

4. The page uses relative fonts

Instead of using absolute fonts (px) on HTML pages, use relative fonts (em). For most browsers, you usually use em = px/16 conversion, for example, 16px equals 1em.

According to the above, I have made some changes to the CSS of my blog and found that I can browse to a page with a better experience from my iPhone phone, but there is one problem that has not been solved, that is, the top navigation bar navbar shows a problem, which is covered by the following article after changing the line. I don't know how to better solve this problem (update: after netizens' prompt, add overflow:hidden to the style of the navigation bar divNavbar This problem can be solved in one line.

The following picture is accessed using iPhone. The Moonlight blog home page after modifying CSS to an adaptive page looks much better than the original unoptimized page.

In short, according to the above four steps, you can simply modify a website to a page suitable for multiple devices, which is indeed a good thing for users who visit the site through their mobile phones.

The following is more detailed supplementary information:

With the popularity of 3G, more and more people use mobile phones to surf the Internet.

Mobile devices are surpassing desktop devices as the most common terminals to access the Internet. As a result, web designers have to face a difficult problem: how can the same web pages be rendered on devices of different sizes?

The screen of the mobile phone is relatively small, usually less than 600pixel wide; the width of the PC screen is generally more than 1000 pixels (the current mainstream width is 1366 × 768), and some even reach 2000 pixels. It is not easy for the same content to show satisfactory results on screens of very different sizes.

The solution for many websites is to provide different pages for different devices, such as a dedicated mobile version, or an iPhone / iPad version. This ensures effectiveness, but it is troublesome to maintain several versions at the same time, and if a site has multiple portal, it will greatly increase the complexity of the architectural design.

As a result, it has long been wondered whether it is possible to "design at once, universally applicable", so that the same web page can automatically adapt to different screen sizes and automatically adjust the layout (layout) according to the width of the screen.

I. the concept of "adaptive web design"

In 2010, Ethan Marcotte coined the term "adaptive web design" (Responsive Web Design), which refers to a web design that automatically recognizes the screen width and adjusts accordingly.

He made an example of the heads of the six main characters in the Adventures of Sherlock Holmes. If the screen width is greater than 1300 pixels, the six pictures are side by side.

If the screen width is between 600pixel and 1300 pixel, the six pictures are divided into two lines.

If the screen width is between 400 and 600 pixels, the navigation bar moves to the page header.

If the screen width is less than 400 pixels, the six pictures are divided into three lines.

There are more examples of this on mediaqueri.es.

There is also a test gadget that can display the test results of different resolution screens on a web page at the same time. I recommend installing it.

Allow the width of the web page to be adjusted automatically

How on earth does "adaptive web design" do? It's not that hard.

First, add a line of viewport meta tags to the header of the page code.

Viewport is the default width and height of the page, which means that the width of the page is equal to the screen width (width=device-width) by default, and the original zoom ratio (initial-scale=1) is 1.0, that is, the initial size of the page accounts for 100% of the screen area.

All major browsers support this setting, including IE9. For older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js.

Third, do not use absolute width

Because the layout of a web page adjusts to the width of the screen, you cannot use a layout with absolute width, nor can you use elements with absolute width. This one is very important.

Specifically, the CSS code cannot specify the pixel width:

Width:xxx px

You can only specify a percentage width:

Width: xx%

Or

Width:auto

IV. Fonts of relative size

Fonts cannot use absolute size (px), but can only use relative size (em).

Body {

Font: normal 100% Helvetica, Arial, sans-serif

}

The above code specifies that the font size is 100% of the default size of the page, or 16 pixels.

H2 {

Font-size: 1.5em

}

The size of H2 is then 1.5 times the default size, that is, 24 pixels (24 ppm 16-1.5).

Small {

Font-size: 0.875em

}

The size of the small element is 0.875 times the default size, or 14 pixels.

5. Mobile layout (fluid grid)

The meaning of "flow layout" is that the position of each block is floating, not fixed.

.main {

Float: right

Width: 70%

}

.leftBar {

Float: left

Width: 25%

}

The advantage of float is that if the width is too small to hold two elements, the latter element will automatically scroll below the previous element without overflow (overflow) in the horizontal direction, avoiding the occurrence of horizontal scroll bars.

In addition, absolute positioning (position: absolute) should also be used very carefully.

Choose to load CSS

The core of "adaptive web design" is the Media Query module introduced by CSS3.

It means that the screen width is automatically detected and then the corresponding CSS file is loaded.

The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), the tinyScreen.css file is loaded.

If the screen width is between 400 and 600 pixels, the smallScreen.css file is loaded.

In addition to loading CSS files with html tags, you can also load them in existing CSS files.

@ import url ("tinyScreen.css") screen and (max-device-width: 400px)

7. CSS's @ media rule

In the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions.

@ media screen and (max-device-width: 400px) {

.column {

Float: none

Width:auto

}

# sidebar {

Display:none

}

}

The above code means that if the screen width is less than 400 pixels, the column block is unfloating (float:none), the width is automatically adjusted (width:auto), and the sidebar block is not displayed (display:none).

8. Picture adaptation (fluid image)

In addition to layout and text, "adaptive web design" must also achieve automatic scaling of images.

All it takes is one line of CSS code:

Img {max-width: 100%;}

This line of code is also valid for most videos embedded in web pages, so it can be written as:

Img, object {max-width: 100%;}

The older version of IE does not support max-width, so it has to be written as:

Img {width: 100%;}

In addition, when the windows platform zooms the picture, the image may be distorted. At this point, you can try using IE's proprietary commands:

Img {- ms-interpolation-mode: bicubic;}

Or, Ethan Marcotte's imgSizer.js.

AddLoadEvent (function () {

Var imgs = document.getElementById ("content") .getElementsByTagName ("img")

ImgSizer.collate (imgs)

})

However, if there are conditions, it is best to load pictures of different resolutions according to different screen sizes. There are many ways to do this, both server-side and client-side.

At this point, I believe you have a deeper understanding of "how to achieve adaptive web design". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.