preface

As a front-end developer, responsive web development is one of the essential skills. The reactive form has its good advantages and certain disadvantages. This requires us to make trade-offs in development. For less content, mainly for the display of the website, so the use of responsive; For the content of many, the management of the website to use separate development, different devices to use a different set of code. This article will mainly explore the principles and techniques of responsive layout, combined with examples to deepen the impression.

Responsive and adaptive

Many of us think of responsive and adaptive sites as one and the same, but there are some differences in the way they are laid out. We can look at the concepts of these two approaches and the problems they solve.

What is responsive layout?

Responsive layout is a site compatible with multiple terminals, can automatically adjust the display and layout of the page according to the size of the screen, we do not need to do a specific version for each terminal. A few signs of a responsive website:

  1. At the same time adapt PC + tablet + mobile phone;
  2. TAB navigation changes to classic drawer navigation when approaching handheld terminal devices;
  3. The layout of the site adjusts the size and location of modules according to the viewport;

What is adaptive layout?

Adaptive layout refers to the ability of a web page to display itself on different sizes of terminal devices, that is, a website can display the same page on different sizes of devices, so that the same page ADAPTS to different sizes of screens, according to the screen size, automatic scaling. A few signs of adaptive layout:

  1. Mostly just mainstream N mainstream viewports for a single terminal;
  2. When the viewport size is lower than the minimum set viewport, the interface will appear incomplete display and horizontal slider;
  3. Overall framework unchanged, horizontal layout of the board too much will be reduced.

How to choose

Generally speaking, the two methods are similar in that they check the device first and use different CSS for different devices. So how do we choose in development? This should be combined with the advantages and disadvantages of responsive and adaptive.

The advantages of responsive layout: 1, flexibility; 2, can quickly solve the problem of multi-device display.

Disadvantages: 1, low efficiency, large workload compatible with various equipment; 2. The code is cumbersome and the loading time will be longer; 3, changed the original layout structure of the website to a certain extent.

Advantages of adaptive layout: 1, more compatible with the complexity of the site; 2. More efficient code; 3. It is relatively easy and accurate to test and operate.

Disadvantages: 1. The same website needs to develop different pages for different devices, which increases the development cost.

The above two methods have their own advantages and disadvantages, so when we develop, we should start from the actual project. For pages that are not too complex, we can use responsive layouts; In the case of more information and more complex layout, we can adopt adaptive layout.

Responsive layout design steps

After introducing the basic concepts, let’s take a look at the basic steps of responsive layout, which are divided into the following steps: 1. Setting meta Tags

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

2. Use @media queries for styling, which is the heart of responsive layout

@media screen and (max-width: 1920px) {... }Copy the code

3. Set layout cutoff points, which control the layout of the page by setting various view width styles

@media screen and (max-width: 1920px) {... } @media screen and (max-width: 1700px) {... }Copy the code

In fact, it is very simple, is in the adaptation of a little bit cumbersome.

Layout cut-off points

For the cut-off point of @media query, this can be adjusted according to their own project, set the appropriate layout cut-off point of their own project. < span style = “max-width: 100%; clear: both; When min-width is used, place the smaller values in front and the larger values in back. Here are some of the layout cutoff points THAT I set during project development:

@media screen and (max-width: 1920px) {... } @media screen and (max-width: 1700px) {... } @media screen and (max-width: 1600px) {... } @media screen and (max-width: 1440px) {... } @media screen and (max-width: 1280px) {... } @media screen and (min-width: 992px) and (max-width: 1200px) {... } @media screen and (min-width: 768px) and (max-width: 991px) {... } @media screen and (max-width: 767px) {... }Copy the code

When do we use min-width and when do we use max-width? In general, min-width is used if mobile is preferred; If PC is preferred, use max-width.

Layout of the unit

It is important to familiarize yourself with common layout units, such as pixel (PX), percentage (%), EM, REM, and VW /vh. We can use these layout solutions to improve the efficiency and quality of our development.

pixel

Pixels are the basis of the layout of a web page. One pixel represents the smallest area a computer screen can display. There are two types of pixels: CSS pixels and physical pixels. The differences are as follows:

CSS pixel: An abstract unit for web developers to use in CSS; Physical pixels: The physical pixels of any device are fixed, depending only on the hardware density of the device.

The percentage

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 general intuition is that the percentage of the child element is completely relative to the immediate parent element, which is fine, like the height and width attributes. However, CSS box models have not only height and width attributes, but also padding, border, margin, etc., so it is worth analyzing in detail.

Let’s start with the HTML code and see what happens with different CSS code:

<div class="parent">
    <div class="child">Child elements</div>
</div>
Copy the code

1. Height and width of child elements

When the height and width of the child element are percentages, they vary relative to the height and width of the immediate parent element.

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
}
Copy the code

2. Top, bottom, left, and right of child elements

The height of the top and bottom of the child elements relative to the parent element of the direct non-static positioning (default positioning), if the percentage is set; The left and right of child elements, if set in percentage, relative to the width of the parent element that is directly non-static positioned (by default positioned).

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
    position: relative;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
}
Copy the code

3. Padding of child elements

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.

.parent{
    width: 300px;
    height: 400px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    padding-top: 20%;
    padding-left: 20%;
}
Copy the code

Open the console and look at the child elements. We can see that the padding-top and padding-left elements are both 20% of the width of the parent element — 60px:

4. Margin of child element

Margin of a child element is the same as padding. If the margin of a child element is set to a percentage, both vertical and horizontal are relative to the width of the immediate parent element.

5. Border-radius of child elements

Border-radius, set to a percentage, is the width relative to itself

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    border-radius: 50%;
}
Copy the code

Em and rem

Em and REM are more flexible than PX, they are both units of relative length, and the difference between them can be summed up in one sentence: EM relative to parent element, REM relative to root element. Em is the font size relative to the parent element, rem is the font size relative to the HTML element.

vw/vh

Vw /vh is the unit related to the view window, vw is the width relative to the view window, vh is the height relative to the view window, in addition to vw and vh, there are two related units vmin and vmax.

unit meaning
vw The window width is 100vw relative to the window width
vh The window height is 100vh relative to the window height
vmin Smaller values in VW and Vh
vmax Larger values in VW and VH

The units are similar to percentages, but there are differences:

unit meaning
% Most are relative to ancestor elements, but also relative to themselves (border-radius, translate, etc.)
vw/vm Size relative to the window

Responsive layout practices

Ok, with that said, we can now combine the above theoretical knowledge to create a responsive layout demo. I will post some of the code below to give some ideas. The complete code is posted on my Github.

The initial layout

First of all, we carried out the overall layout. The demo was mainly divided into three parts: head, content and bottom, similar to a simple enterprise official website.


      
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Responsive layout practices</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="root">
    <! - the head -- -- >
    <header>
        <div class="header-box">
            <div class="logo">
                logo
            </div>
            <nav class="main-nav">
                <ul class="nav-list">
                    <li id="nav-item" class="main-nav-item">
                        <ul class="nav-main-list">
                            <li class="list-item">Home page</li>
                            <li class="list-item">The article</li>
                            <li class="list-item">BBS</li>
                            <li class="list-item">entertainment</li>
                            <li class="list-item">contact</li>
                        </ul>
                    </li>
                    <li class="main-nav-login">
                        <div class="login-box">Login | register</div>
                    </li>
                </ul>
            </nav>

        </div>
    </header>

    <! - content - >
    <div id="container">
        <div class="container-header"></div>
        <div class="content">
            <! -- Content 1 -->
            <div class="content-box content-box1">
                <div class="content-box1-text"></div>
                <div class="content-box1-img">
                    <div class="img-radius"></div>
                </div>
            </div>
            <! -- Content 2 -->
            <div class="content-box content-box2">
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
            </div>
            <! -- Content 3 -->
            <div class="content-box content-box3">
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
            </div>
        </div>
    </div>

    <! -- -- -- > at the bottom of the
    <footer></footer>
</div>

</body>
</html>
Copy the code

In this demo, the initial CSS code was written at 1920px, and this is our initial style. The initial style code is too long to be pasted in the article. See >>> index.css.

min-width

Medium and large screen adaptation

As mentioned earlier, layout cut-off points are divided according to the actual project. I have made the following division for this project, and you can also divide according to your own ideas.

1201px~1280px

Let’s see what happens when we set the width to 1201px:

@media screen and (max-width: 1280px) {
     /* Contents */
    .content-box1{
        flex-wrap: wrap;
        height: 650px;
    }
    .content-box1-text{
        width: 90%;
        margin: 0 auto;
    }
    .content-box1-img{
        display: flex;
        align-items: center;
        margin: 0auto; }}Copy the code

Let’s look at the layout:

992px~1200px

What happens at this time:

@media screen and (min-width: 992px) and (max-width: 1200px) {
    /* Content 2 */
    .content-box2{
        height: 400px;
    }
    .content-box2-text{
        height: 300px;
        min-width: 200px;
    }

    /* * */
    .content-box3{
        justify-content: space-around; }}Copy the code

Let’s look at the layout:

768px~991px

At this point, the layout problem will also occur, so further adjustments will have to be made, since the operation is repeated, and there will be no maps and code. We can focus on the following adaptations.

Mobile adaptation

In Boostrap’s grid system, screen sizes <768px are classified as mobile phones. We can also use this as a reference. At this time, the layout adjustment is not only the content adjustment, our navigation bar will also change — from horizontal navigation bar to click the vertical navigation bar (specific requirements, specific implementation, here is just a general transformation method). As shown below:

  1. Write a button, such as the button in the upper right corner of the picture, is not familiar;
  2. Navigation bar style rewrite, from horizontal navigation bar to vertical navigation bar;
  3. Use JS to achieve click button, navigation bar display and hidden switch.

button

We add the following HTML code to the end of the class named nav-list:

.<li class="phone-show">
    <div id="nav-btn" class="nav-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
</li>.Copy the code

Then beautify the button style:

@media screen and (max-width: 767px){
    ...
    .phone-show{
        display: block;
        height: 60px;
        width: 60px;
    }
    .nav-btn{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .nav-btn span{
        display: inline-block;
        height: 10px;
        width: 60px;
        background: coral; }}Copy the code

Look at the results:

Navigation style modification

This we can skillfully use a relative positioning and absolute positioning relationship to achieve the navigation bar style and position modification:

@media screen and (max-width: 767px) {.header-box{
        position: relative; }.../* Mobile style */
    .main-nav-item{
        display: none;
        position: absolute;
        width: 10rem;
        right: 0;
        top: 8rem;
        border-radius: 0 0 .5rem .5rem;
    }
    .nav-main-list{
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 0 0 .5rem .5rem;
    }
    .list-item{
        width: 100%;
        margin: 0 1rem;
        border-bottom: 1px solid #eeeeee; }}Copy the code

Look at the results:

Navigation bar shows and hides toggles

The idea of using JS to control switching is very simple. When the web page is opened, we first hide the navigation, then define a variable hide, the initial value is true, click the button to judge: if the hide value is true, the navigation will be displayed; Hide instead.

let btn = document.getElementById("nav-btn");
let  nav =  document.getElementById("nav-item");

let hide = true;

btn.addEventListener('click'.function () {
    if (hide){
        nav.style.display = "block";
        hide = false;
    } else {
        nav.style.display = "none";
        hide = true; }});Copy the code

The demo address

reference

Do you know the difference between adaptive and responsive?

What’s the difference between responsive and adaptive?

Comparison of common solutions for responsive layouts (media query, percentage, REM, and VW/VH)

The last

Please point out any inaccuracies or errors in this article