Responsive layout and Adaptive Layout

1. layout Classification

1.1 fixed layout: in pixels.

Disadvantages: ① the page is rigid, the screen size is different, and the display effect is different;

② Does not adapt to the responsive layout.

1.2. Stream layout: % (percentage) is used as the unit. Percentage width = target element width/context element width.

Advantage: It can be adaptive and display different widths according to different resolutions.

Disadvantage: The line height and the margin-top display on the screen are too high, and the display on the small screen is too narrow.

1.3. Elastic layout: the unit is em. Percent size = target element size/context element size. Currently, the default text size of the browser is 16 PX, and the text pixel PX is converted to a relative unit using EM. 1rem = 16 PX. Elastic layout also supports responsive web design.

2. Concept of responsive Layout

A responsive layout is equal to a flow grid layout, while an Adaptive Layout is equal to a fixed split point layout.

The responsive layout is intended to display different web pages on terminals with different screen resolutions. Through responsive design, websites can have a better browsing and reading experience on mobile phones and tablets.

2.1 responsive design steps

2.1.1. Set meta tags

<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = No">

The user-scalable = No attribute solves the problem that the iPad can return to the specific size after the screen is switched to the horizontal screen. The preceding view label tells the browser to use the device width as the view width and disable the initial scaling.

2.1.2. Use css3 to query media to write different CSS styles

① @ Media (min-width: 320px) and (max-width: 639px) {} indicates the style setting method of pixels between 320 and 629.

② @ Media screen and (min-width: 1000px) {} indicates the style setting method with the minimum width of 1000.

Note: IE6-8 IE does not support the media query in css3, in order to solve this problem, just need to download respond. js on the Internet to put it to our local, then introduce on the page. The GitHub address of respond. JS is as follows:

Https://github.com/scottjehl/Respond/

③ Write CSS responsive web design specifications

--- Whether the header reset.css should be independent from a CSS file or put directly on the top of the CSS file.

--- Place the common header or tail style directly on the top of the CSS file, and the common page CSS style on the top (add comments .)

--- Media query CSS styles are organized as follows:

A. Develop CSS media queries on mobile terminals

/* Min-width: 320px

* For CSS with an independent pixel of 320px

@ Media (min-width: 320px) and (max-width: 639px ){

/* CSS style */

}

========================================================== ========================================================== ======================================

/* The Independent pixel width is 360 or 384.

* Max-width: 384, but the padding font size is calculated by installing 360px.

@ Media (min-width: 360px) and (max-width: 399px ){

/* CSS style */

}

========================================================== ========================================================== ======================================

/* For independent pixels of PX

@ Media (min-width: 400px ){

/* CSS style */

}

========================================================== ========================================================== ======================================

/* For independent pixels greater than 640 and less than 999

@ Media (min-width: 640px) and (max-width: 999 ){

/* CSS style */

}

========================================================== ========================================================== ======================================
B. More than 1000 of media queries on the PC end are written as follows:

@ Media screen and (min-width: 1000px ){

/* CSS style */

}

Note:

1. Set the usage rate of % (percentage ).

2. Resize Images

A. A simple solution can use percentages, but this is unfriendly and will enlarge or reduce the image. You can try to specify the maximum width as the percentage for the image. If the number of fake clips exceeds the limit, the image will be reduced. When the dummy slice is small, the original size is output.

IMG {width: auto; max-width: 100% ;}

B. Use::beforeAnd::afterPseudo element + content attribute to dynamically display some content or do other cool things. In css3, any element can use the content attribute, this method combines the ATTR attribute of css3 with the function of HTML custom attribute: HTML structure:

Data-src-600px = "image-600px.jpg"

Data-src-800px = "image-800px.jpg"

 >

CSS control:

     @media (min-device-width:600px) {    　　img[data-src-600px] {        content: attr(data-src-600px, url);    　　}　　}　　　@media (min-device-width:800px) {    　　img[data-src-800px] {        content: attr(data-src-800px, url);    　　}　　}

Responsive layout and Adaptive Layout