[Go] Responsive web Design Learning (1)-judging screen size and percentage usage

Source: Internet
Author: User

Original address: http://www.jb51.net/web/70360.html

Now mobile devices become more and more popular, users use smartphones, pad on the page more and more common. However, the traditional fix-type page does not display well on the mobile terminal. Therefore, Ethan Marcotte proposes a concept of responsive web design.

The responsive web design is in English for Responsive, and is abbreviated as RWD.

In the library, I borrowed a "Head first moblie Web"from O ' Reilly, which described some techniques for doing RWD.

The two tips learned today are:

1. Use media information to help determine screen size

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

look at the results of today's experiment ( This article concludes with a download link to the test example ):

Video:

Full screen when the page is displayed


When you narrow your browser to mimic a mobile device:

How do we do that?

First, use the media statement in the CSS file

To make it possible to make a Web page based on different device sizes, you need to be prepared for each size in advance. For example, in a normal PC monitor, it may be displayed in three columns, such as:

In mobile devices, such as smartphones, they may need to be distributed in a streaming form, as follows:

Obviously, the CSS distribution of the two is different, the three columns display, the left and right sides of the column need to float to the desired direction, and in the flow layout, each block is a serial downward display. So, at least for each of the different CSS distributions, there should be different strategies. Now you can edit two different CSS files and then use the <link> command to do the introduction. However, you can also use @media statements to make logical judgments. As follows: @media screen and (min-width:480px) {/*css style*/}

Of these, screenis one of the many types of media, and other common media types are print. And Min-width is one of the feature of media. Media has many feature that can be used to help us make logical judgments, often with monochrome (monochrome), max-width, and so on.

With this @media statement, we can make a logical judgment like if-else. For example, the two different cases given in the example are judged using the following statement, respectively:

Copy CodeThe code is as follows:
/***********desktop Structural css*************/
@media screen and (min-width:481px) {
/* The page displayed by the desktop browser css*/
}
/***********mobile Structural css*************/
@media screen and (max-width:480px) {
/* Web page displayed by the mobile browser css*/
}


Statement, and represents the logical "and", if you want to express the logic "or" can use "," such as @media print, screen and (monochrome) {/**/}

The CSS settings in curly braces are used when you are on a "print device" or "monochrome screen device."

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

When designing for the first time, it is designed directly as a percentage, as

In addition, according to the traditional Web page design method, first set the pixels of each region, such as the main area of 460px, then if the entire page width is set to 960px, then the width of the main is 460/960=47.92%, the reconstruction of the page can be used to convert the method.

"Test Example Download"

[Go] responsive web Design Learning (1)-Determine screen size and percentage usage

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.