Responsive web design (I)

Nowadays, mobile devices are becoming more and more popular, and web pages on smartphones and tablets are becoming more and more popular. However, traditional fixed pages cannot be displayed on mobile terminals. Therefore, Ethan Marcotte proposed a responsive web design concept.

The responsive web design is responsive web design, abbreviated as RWD.

I borrowed an o'reilly copy from the library.Head first moblie Web, Which describes some RWD techniques.

Two tips learned today:

1. Use Media Information to help determine the screen size

2. Use percentages to replace previously used pixels to declare width and other size-related information

Let's take a look at the results of today's experiment (The download link for the test example is provided at the end of this article.):

Video:

When the page is displayed on the full screen

When you narrow the browser to imitate a mobile device:

How can this problem be achieved?

First, use the media statement in the CSS file.

If you want to enable the webpage to be matched based on different device sizes, you need to prepare various sizes in advance. For example, a normal PC display may be displayed in three columns, for example:

However, mobile devices, such as smartphones, may need to be distributed in streaming mode as follows:

Obviously, the CSS distribution of the two is different. In the three-column display, the columns on both sides of the left and right need to float to the desired direction, while in the stream layout, each block is displayed in a serial downward manner. Therefore, we can see that at least there should be different policies for each different CSS distribution. Now you can edit two different CSS files and use the <link> command to introduce them. However, you can use the @ media statement to perform logical judgment. As follows:

@ MediaScreenAnd (Min-Width: 480px) {/* CSS style */}

Where,ScreenIs one of the many media types, and other common media types also include print. WhileMin-WidthIs one of media feature. Media has a lot of feature that can be used to help us make logical judgments. Common ones include monochrome (monochrome) and max-width.

With this @ media statement, we can make logic judgments similar to if-Else. For example, the following statements are used to determine two different cases:

/** ********* Desktop structural CSS *************/@ MediaScreenAnd(Min-width: 481px){/*CSS on the Web page displayed by the desktop browser*/}/** ********* Mobile structural CSS *************/@ MediaScreenAnd(Max-width: 480px){/*CSS on the webpage displayed by the mobile browser*/}
 

In a statement, and represents the logical "and". To represent the logical "or", you can use ",", for example

@ MediaPrint,Screen and (monochrome){/**/}

It indicates that CSS settings in braces are used when the device is on a print device or a monochrome screen device.

Second, replace the pixel units related to the size with percentages.

When designing for the first time, the design is based on the percentage, as shown in figure

In addition, you can determine the pixels of each area according to the traditional webpage design method. For example, if the main area is 460px, if the width of the entire webpage is set to 960px, the width of main is 460/960 = 47.92%. This conversion method can be used to reconstruct the webpage.

 

[Download test example]