Adaptive Web Design: Different devices present the same page

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 PC screen width is generally above 1000 pixel (the current mainstream width is 1366x768), some also reach 2000 pixel. The same content, in different sizes of the screen, are showing satisfactory results, is not an easy thing.

Many of the Web site's 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.

There are more examples of this in mediaqueri.es.

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

"Adaptive web Design" in the end how to do it? Actually, it's not difficult.

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

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 those older browsers (mostly IE6, 7, 8), you need to use Css3-mediaqueries.js.

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, Sans-serif;
}

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

H1 {
Font-size:1.5em;
}

The size of the H1 is then 1.5 times times the default size, or 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, or 14 pixels (14/16=0.875).

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

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

Six, 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 probed, and then the corresponding CSS file is loaded.

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

Seven, CSS @media rules

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

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

. column {
Float:none;
Width:auto;
}

#sidebar {
Display:none;
}

}

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

Wen: Ruan a peak blog