Adaptive Web design Method (good access experience on the phone side)

Yesterday at noon Google conducted an online lecture on the concept and methods of adaptive web design, maintaining the same Web page code, so that the site in a variety of browsing equipment (from desktop computer monitors to smartphones or other mobile device) on the better reading experience, here I will briefly organize the lecture content

1. Add viewport tags to the HTML header.

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

Copy CodeThe code is as follows:
<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

This code supports chrome, Firefox, IE9 or more browsers, but not IE8 and browsers below IE8.

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

For example, use the following code, you can make the screen width of less than 480 pixels of devices (such as the iphone, etc.), the Web side bar hides the middle content bar width automatically adjust. The following code is for Z-blog,wordpress-related label names just modify it.

Copy CodeThe code is as follows:
@media screen and (max-device-width:480px) {
#divMain {
Float:none;
Width:auto;
}
#divSidebar {
Display:none;
}
}

3, the layout width uses the relative width.

The overall frame of the Web page can use absolute width, but the lower content frame, sidebar, etc. are best used relative width, so it is convenient to modify for different resolutions. Of course, you can not use the relative width, it is necessary to @media screen and (max-device-width:480px) to increase the width of the individual div for small screens, actually more trouble.

4, the page uses the relative font

Do not use the absolute font (PX) on the HTML page, but to use relative font (EM), for most browsers, usually with the EM = px/16 conversion, such as 16px is equal to 1em.

According to the above points, I have made some changes to my blog's css, found that I can browse from the iphone to experience better pages, but there is a problem is not resolved, is the top navigation bar navbar display problems, after the line is covered by the following article, Do not know how to better solve this problem (update: After netizens hint, in the navigation bar Divnavbar style, add Overflow:hidden; One line to solve this problem).

Is the use of the iphone access, after modifying the CSS for the Adaptive Web page after the Moonlight Blog home page, looks much better than the original non-optimized page.

In short, according to the above four steps to modify, it can be very simple to modify a site for a variety of devices to browse the page, which for the user through the mobile phone access to the site, it is indeed a good thing.

The following is a more detailed supplementary information:

With the popularization of 3G, more and more people use mobile Internet.

Mobile devices are exceeding desktop devices and becoming the most common endpoint for accessing the Internet. As a result, web designers have to face a dilemma: how can the same page be presented on devices of different sizes?

The screen of the phone is smaller and generally 600 pixels wide, and the screen width of the PC is generally above 1000 pixels (currently the mainstream width is 1366x768), and some 2000 pixels are reached. The same content, on the different sizes of the screen, all show a satisfactory effect, is not an easy thing.

Many web sites are designed to provide different Web pages for different devices, such as a dedicated mobile version or a iphone/ipad version. This is guaranteed to be effective, but it is cumbersome to maintain several versions at the same time, and if a site has multiple portals (portals), it will greatly increase the complexity of the architecture design.

So, it was early to imagine, can "one design, universal application", so that the same page automatically adapt to different sizes of the screen, according to the width of the screen, automatically adjust the layout?

I. The concept of "adaptive web Design"

In 2010, Ethan Marcotte proposed the term "adaptive web Design" (Responsive web design), which refers to Web designs that automatically recognize screen widths and make adjustments accordingly.

He made an example of the six heroes of the Adventures of Sherlock Holmes. If the screen width is greater than 1300 pixels, then 6 pictures are on one line.

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

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

If the screen width is below 400 pixels, 6 pictures are divided into three rows.

There are more examples of mediaqueri.es above.

There is also a test gadget that can be displayed on a Web page with different resolution screens, which I recommend to install.

Second, allow Web page width automatic adjustment

How does "adaptive Web Design" work? It's not that hard actually.

First, in the header of the page code, add a row of viewport meta tags.

<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

Viewport is the default width and height of the page, which means that the page width defaults to the screen width (width=device-width), the original scale (initial-scale=1) is 1.0, that is, the initial size of the page occupies 100% of the screen area.

This setting is supported by all major browsers, including IE9. For those older browsers (mostly IE6, 7, 8), you need to use Css3-mediaqueries.js.

<!--[If Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->

Three, do not use absolute width

Because the page adjusts the layout based on the width of the screen, you cannot use an absolute width layout or an element with an absolute width. This is a very important article.

Specifically, CSS code cannot specify pixel widths:

width:xxx px;

Only percent widths can be specified:

width:xx%;

Or

Width:auto;

Four, the relative size of the font

The font also cannot use absolute size (px), but only 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, which is 16 pixels.

H1 {
Font-size:1.5em;
}

Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

Small {
Font-size:0.875em;
}

The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

V. Flow layout (fluid grid)

The meaning of "flow layout" is that the positions of each block are 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 fit two elements, the following elements will automatically scroll to the bottom of the preceding element without overflow (overflow) horizontally, avoiding the appearance of the horizontal scroll bar.

In addition, the use of absolute positioning (Position:absolute) should also be very careful.

Vi. Choosing 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.

<link rel= "stylesheet" type= "Text/css"
Media= "screen and (max-device-width:400px)"
href= "Tinyscreen.css"/>

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

<link rel= "stylesheet" type= "Text/css"
Media= "screen and (min-width:400px) and (max-device-width:600px)"
href= "Smallscreen.css"/>

If the screen width is between 400 pixels to 600 pixels, the Smallscreen.css file is loaded.

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

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

Vii. @media rules for CSS

The same CSS file, you can also choose to apply different CSS rules depending on the screen resolution.

@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 de-floating (float:none), Width auto-adjusting (Width:auto), and the sidebar block is not displayed (Display:none).

Eight, the image of the adaptive (fluid image)

In addition to layout and text, adaptive web design must also implement automatic scaling of pictures.

This is just one line of CSS code:

img {max-width:100%;}

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

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

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

img {width:100%;}

Additionally, image distortion may occur when the Windows platform scales pictures. At this point, you can try to use 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 is a condition, it is best to load different resolution images depending on the screen of different sizes. There are many ways to do this, both server side and client can implement.

Adaptive Web design Method (good access experience on the phone side)