Definition 1.

Responsive layout means that the same page has different layouts for different screen sizes. The traditional way of development is to develop one set for PC and another set for mobile, but with responsive layout only one set is enough.

2. The advantages

Flexible in the face of different resolution equipment;

Can quickly solve the problem of multi-device display adaptation;

3. Reactive layout Method 1: Media query

With @media media queries, different styles can be defined for different media types, especially for responsive pages, and multiple styles can be written for different screen sizes to achieve adaptive effects. For example:

@media screen and (max-width: 960px){ body{ background-color:#FF6699 } } @media screen and (max-width: 768px){ body{ background-color:#00FF66; } } @media screen and (max-width: 550px){ body{ background-color:#6633FF; } } @media screen and (max-width: 320px){ body{ background-color:#FFFF00; }}Copy the code

The above code defines several styles through the media query, and sets the maximum resolution for the styles to take effect by max-width. The above code sets different background colors for screens with resolutions of 0 ~ 320px, 320px ~ 550px, 550px ~ 768px, and 768px ~ 960px respectively. Through media queries, responsive layouts can be achieved by writing different styles for devices with different resolutions. For example, we set different background images for screens with different resolutions. For example, set @2x map for small screen mobile phone, set @3x map for large screen mobile phone, through media query can be very convenient to achieve. But the downside of media queries is that if there are too many styles that need to be changed as the browser sizes change, then multiple sets of style code can be cumbersome.

4. Responsive layout method 2: %

For example, when the width or height of the browser changes, the percentage unit allows the width and height of the components in the browser to change with the browser, thus achieving a responsive effect.

The percentage of the height and width attributes depends on the width and height of the parent tag. But the padding, border, margin, etc.?

The top and bottom of the child elements, if set in percentage, are the height relative to the parent element of the direct non-static positioning (the default positioning), and the left and right of the child elements, if set in percentage, are the width relative to the parent element of the direct non-static positioning (the default positioning). The padding of the child element, if set to a percentage, is either vertical or horizontal relative to the width of the parent element, regardless of the height of the parent element. The margin of the child element is set to a percentage, both vertically and horizontally, which is different from the width border-radius of the parent element. If the border-radius is set to a percentage, it is relative to its own width

5. Responsive layout method three: VW/VH

Css3 introduced a new unit vw/vh related to the view window, where VW represents the width relative to the view window and vh represents the height relative to the view window. For any level element, 1vw is equal to 1/100th of the view width in vw units.

Similar to the percentage layout, but more useful.

6. Responsive layout method 4: REM

Rem units are HTML elements relative to font size, also known as root elements. By default, the font size of HTML elements is 16px. So 1rem is equal to 16px.

The first edition

@media screen and (max-width: 414px) { html { font-size: 18px } } @media screen and (max-width: 375px) { html { font-size: 16px } } @media screen and (max-width: 320px) { html { font-size: Using REM and media queries, give it a different font size when the resolution changes. Indicates that under different devices, 1rem represents different sizes, visible width < 320px, 1rem == 12px; 320px < visible width < 375px, 1rem == 16px; 375px < visible width < 414px, 1rem == 18px; You can set the CSS root file once, and write the normal style when developing other modules.Copy the code

Optimized version

// Dynamically set the font size for the root element
function init () {
    // Get the screen width
    var width = document.documentElement.clientWidth;
    // Set the font size for the root element. This is 20 equal parts of the width
    document.documentElement.style.fontSize = width / 20 + 'px';
}

// Load the application for the first time
init()
// Monitor the timing of the phone rotation event, reset
window.addEventListener('orientationchange', init)
// Monitor phone window changes and reset
window.addEventListener('resize', init)
Copy the code

Benefits of using REM:

1. Rem is a relative unit, scaled exactly to scale, while PX is a unit of size;

2. Px is troublesome in calculation, and REM avoids such calculation;