Responsive Web Design Learning (1) - Determining the screen size and percentage usage

Nowadays, mobile devices are becoming more and more popular, and it is more and more common for users to use smartphones and pads to browse the web. However, traditional fix-type pages cannot be displayed well on mobile terminals. Therefore, Ethan Marcotte proposed the concept of responsive web design.

The English name of responsive web design is Responsive Web Design, abbreviated as RWD.

I borrowed a book called "Head First Mobile Web" by O'REILLY from the library, which talked about some techniques for doing RWD.

Two things I learned today are:

1. Use media information to help determine screen size

2. Use percentages to replace pixels used previously to declare size-related information such as width

Take a look at the results of today's experiment ( there is a download link for the experimental example at the end of this article ):

video:

When displaying the page in full screen

When narrowing the browser to mimic a mobile device:

How to do it?

First, use the media statement in the css file

If you want your web pages to respond to different device sizes, you need to prepare for each size in advance. For example, on a normal PC monitor, it might be displayed in three columns, like this:

On mobile devices, such as smartphones, it may be necessary to distribute them in streaming, as follows:

Obviously, the CSS distribution of the two is different. In the three-column display in the above figure, the columns on the left and right sides need to float to the required direction respectively, while in the flow layout in the figure below, the blocks are displayed serially downward. Therefore, it can be seen that at least for each different CSS distribution, there should be a different strategy. Now you can edit two different CSS files and import them using the <link> directive. However, you can also use the @media statement to perform logical judgments. As follows: @media screen and ( min-width :480px){/*css style*/}

Among them, screen is one of the many types of media, and other common media types include print. Min-width is one of the features of media. Media has many features that can be used to help us make logical judgments, common ones include monochrome, max-width, etc.

With the help of this @media statement, we can make logical judgments similar to if-else. For example, the two different situations given in the example are judged using the following statements:

It means that when it is on a "print device" or a "monochrome screen device", the CSS settings in the curly braces are used.

Next, replace the pixel units associated with the dimensions with percentages.

When designing for the first time, just design according to the percentage, such as

In addition, you can also follow the traditional web page design method and first determine the pixels of each area. For example, if the main area is 460px, then if the width of the entire web page is set to 960px, the width of the main area is 460/960=47.92%. This conversion method can be used when reconstructing the web page.

【Test example download】