Do you really understand responsive layouts?

There was a time when I thought that using media queries was responsive layout. This understanding was too shallow. Let’s rethink what responsive layout is today

To view the demo

View the source code, welcome star

What is responsive layout

Bootstrap is a typical responsive layout framework that was popular a few years ago. Although it has been eliminated now, some popular UI frameworks realize responsive layout by drawing on the idea of Bootstrap, such as Ant Design, Material Design, etc. Bootstrap ushered in the era of responsive layout

I have used several responsive layout frameworks and studied the principles of responsive layout myself, and I believe that a true responsive layout should be:

Our website uses one set of code, compatible with multiple devices, and will make different adjustments on different devices, such as display or hide

Let me experience

The essentials of responsive layout

When you want to implement a responsive layout, you need to pay attention to the following points

Set the viewport

The first thing we do is set up the viewPort and add the following code to your head tag

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
Copy the code

This code sets the width of our page to the width of the device, initializes the zoom to 1, and disallows the user to zoom

Media queries

Media query is the core of responsive layout, why can our web page automatically adjust the style according to the size of the window are all dependent on media query

The media type

@media all {} // Used for all devices @mediaprint{} // for printer @media screen {} // for PC, Pad, PhoneCopy the code

Media properties

The following media features are available

Mobile first

Movement-first means that the styles we write are mobile-oriented, and as the screen width increases, the later styles override the previous ones, as shown below:

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;} } /* pc */ @media screen and (min-width: 1100px) { body { background-color: black; }}Copy the code

The PC is preferred

PC first is the opposite of mobile first, we write styles that are PC first, and then as the screen width decreases, the later styles overwrite the previous styles, see below:

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;}}Copy the code

< span style = “max-width” style = “box-sizing: border-box; color: RGB (51, 51, 51)

Font units

Since we are doing a responsive layout, our font size will change depending on the screen size. Instead of using PX as a font unit, we can use EM or REM, one relative to the parent element and the other relative to the HTML tag. We recommend rem as the font unit

By default our HTML tag font size is 16px, we can use media query to set the font size for different devices

/* pc width > 1100px */ html{ font-size: 100%; } body { background-color: yellow; The font - size: 1.5 rem; } /* ipad pro */ @media screen and (max-width: 1024px) { body { background-color:#FF00FF;The font - size: 1.4 rem; } } /* ipad */ @media screen and (max-width: 768px) { body { background-color: green; The font - size: 1.3 rem; } } /* iphone6 7 8 plus */ @media screen and (max-width: 414px) { body { background-color: blue; The font - size: 1.25 rem; } } /* iphoneX */ @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color:#0FF000;The font - size: 1.125 rem; } } /* iphone6 7 8 */ @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { body { background-color:#0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;The font - size: 0.75 rem; }}Copy the code

Percentage layout

For those of you who have used Bootstrap, there is a grid system that uses percentages to define the elements’ width and height, rather than width. Css3 supports maximum and minimum width and height, which can be used in combination with Max (min) to define the width and height of elements on different devices

/* pc width > 1100px */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; } aside { width: 10%; height: 100%; background-color: red;float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none; width: 100%; height: 7%; background-color: green; } main { height: calc(100vh - 7%); background-color: red; }}Copy the code

Image adaptation

Image adaptation means that the image can be scaled to match the size of the container, using the following code:

img {
    max-width: 100%;
    height: auto;
}
Copy the code

Max-width ensures that the image expands equally as the container grows, while height auto ensures that the image is scaled equally without distortion

Be flexible with background-size for background images

Flex, Grid, Absolute layout, BFC

Flex layout, Grid layout, absolute layout, BFC, etc

The last

To sum up, to achieve a responsive layout we need to pay attention to the following points:

• viewport
• Media queries
• Font units
• Percentage layout
• Image adaptation
• Flex, Grid, BFC, absolute layout and other common techniques

To view the demo

View the source code, welcome star

Your rewards are my motivation to write