preface

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

Mobile devices are overtaking desktop devices as the most common terminal for accessing the Internet. Thus, web designers face a conundrum: how do you render the same page on a device of different sizes?

Mobile phone screens are small, usually under 600 pixels wide; PC screen width, generally in 1000 pixels or more (the current mainstream width is 1366×768), some also reached 2000 pixels. It’s not easy to make the same content look good on different screens.

The solution for many sites is to offer different web pages for different devices, such as a dedicated mobile version or iPhone/iPad version. This ensures the results, but is cumbersome, requires several versions to be maintained at the same time, and can greatly increase the complexity of architectural design if a site has multiple portals.

Therefore, it has long been envisaged that we can “design once for all”, so that the same web page can automatically adapt to different screen sizes, according to the screen width, automatically adjust the layout.

The concept of “adaptive web design”

In 2010, Ethan Marcotte coined the term Responsive Web Design, referring to Web designs that automatically recognize screen width and adjust accordingly.

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

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

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

If the screen width is under 400 pixels, the six images are divided into three rows.

There are more examples of this on mediaqueri.es.

There is also a test widget that shows different screen resolutions on a single web page at the same time, which I recommend installing.

2. Allow web page width to adjust automatically

How does “adaptive Web design” work? It’s not that hard.

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

<meta name="viewport" content="width=device-width.initial-scale=1" />
Copy the code

Viewport is the default width and height of the web page. The default width of the web page is equal to the screen width (width=device-width), and the initial scale (initial-scale=1) is 1.0, i.e. the initial size of the web page is 100% of the screen area.

All major browsers support this setting, including IE9. For older browsers (mainly IE6, 7, and 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]-->Copy the code

Third, do not use absolute width

Because web pages are laid out according to the width of the screen, absolute width layouts and elements with absolute width cannot be used. This one is very important.

Specifically, CSS code cannot specify pixel widths:

width:xxx px;
Copy the code

Only percentage width can be specified:

width: xx%;
Copy the code

or

width:auto;
Copy the code

Four, relative size of the font

Fonts cannot use absolute size (PX), but only relative size (EM).

body {font: normal 100% Helvetica, Arial, sans-serif; }Copy the code

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

H1 {the font - size:1.5 em; }Copy the code

The h1 is then 1.5 times the default size, which is 24 pixels (24/16=1.5).

Small {the font - size:0.875 em; }Copy the code

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

5. Fluid Grid

“Flow layout” means that the position of each block is floating, not fixed.

.main {float: right; width:70%; }. LeftBar {float: left; width:25%; }Copy the code

The nice thing about float is that if the width is too small to fit two elements, the following element scrolls automatically below the preceding one and does not overflow horizontally, eliminating the need for horizontal scroll bars.

In addition, the use of position (absolute) should be very careful.

Load the CSS

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

This means that the screen width is automatically detected and the CSS file is loaded accordingly.

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
Copy the code

If the screen width is less than 400 pixels (max-device-width: 400px), load tinyscreen.css.

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />
Copy the code

If the screen width is between 400 and 600 pixels, load the smallscreen.css file.

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);
Copy the code

The @media rule of the CSS

You can apply different CSS rules to the same CSS file based on the screen resolution.

@media screen and (max-device-width: 400px) {. Column {float: none; Width: auto; # sidebar {}display:none; }}Copy the code

If the screen width is less than 400 pixels, the column block is unfloated (float: None), width:auto (width: Auto) and the sidebar block is not displayed (display: None).

Fluid Image

In addition to layout and text, “adaptive web design” must also enable automatic zooming of images.

All it takes is one line of CSS:

img { max-width: 100%; }Copy the code

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

img, object { max-width: 100%; }Copy the code

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

img { width: 100%; }
Copy the code

In addition, image distortion may occur when the Windows platform zooming in and out of an image. At this point, try using IE’s proprietary command:

img { -ms-interpolation-mode: bicubic; }
Copy the code

Or, Ethan Marcotte’s imgsizer.js.

addLoadEvent(function() {var imgs = document.getElementById("content").getElementsByTagName("img"); ImgSizer. Collate (imgs); });Copy the code

However, if possible, it is best to load images at different resolutions depending on the screen size. There are many ways to do this, both server-side and client-side.