Adaptive Web design provides different Web pages for different devices

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

With the popularization of 3G, more and more people use mobile phones to surf the internet.

Mobile devices are outpacing desktop devices and become the most common terminals to access the Internet. As a result, web designers have to face a dilemma: how to render the same page on different sizes of devices?

The screen of the handset is smaller, the width is usually below 600 pixel; The width of the PC screen is generally more than 1000 pixels (currently the mainstream width is 1366x768), and some also reached 2000 pixels. The same content, in different sizes of the screen, are showing satisfactory results, is not an easy thing.

Many web site solutions are to provide different Web pages for different devices, such as providing a mobile version or a iphone/ipad version. This ensures the effect, but it is more cumbersome, and to maintain several versions, and if a site has multiple portal (portal), will greatly increase the complexity of the architecture design.

So, it is very early to imagine, can be "a design, universal application", so that the same page automatically adapt to different sizes of the screen, according to screen width, automatic adjustment layout (layout)?

The concept of "adaptive web Design"

In 2010, Ethan Marcotte proposed the term "adaptive web Design" (responsive web designs), which is designed to automatically identify 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, the 6 pictures are on one line.

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

If the screen width is between 400 and 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. #p # subtitle #e#

mediaqueri.es there are more examples.

There is also a test gadget that can be used on a single page and display the test effects of different resolution screens, which I recommend to install.

Second, the page width to allow automatic adjustment

How does "adaptive web Design" actually work?

First, in the head of the page code, add a line of viewport meta tags.

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

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

All major browsers support this setting, including IE9. For 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]–>

Third, do not use absolute width

Because the Web page adjusts the layout according to the screen width, you cannot use an absolute width layout, and you cannot use an element that has an absolute width. This one is very important.

Specifically, CSS code cannot specify pixel widths:

width:xxx px;

Only percentage widths can be specified:

width:xx%;

Or

Width:auto;

Four, the relative size of the font

The font also cannot use absolute size (px), and only relative size (EM) is used.

Body {
Font:normal 100% Helvetica, Arial, serif;
}

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

The size of the H1 is then 1.5 times times the default size, or 24 pixels (24/16=1.5).

H1 {
Font-size:1.5em;
}

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

Sgt {
Font-size:0.875em;
}

V. Flow layout (fluid grid)

The meaning of "flow layout" is that each block position 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 fit two elements, the following elements will automatically scroll below the front element, not overflow in the horizontal direction (overflow), avoiding the appearance of the horizontal scroll bar.

Also, absolute positioning (position:absolute) should be used with great care.

Vi. choose to load CSS

The core of adaptive web design is the media query module introduced by CSS3.

It means to automatically probe the screen width and then load the corresponding CSS file.

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

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

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

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);

Seven, CSS @media rules

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

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

Viii. Adaptive Image (fluid image)

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

This is just a line of CSS code:

img {max-width:100%;}

This line of code works for most embedded web-page videos, so you can write:

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

Older versions of IE do not support max-width, so they have to write:

img {width:100%;}

In addition, image distortion may occur when the Windows platform scales pictures. 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 you have the conditions, it is best to load different resolution pictures according to the different size of the screen. There are many ways to do this, both the server side and the client can implement it.

Finish)

Original website: http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html