38. REM adaptive layout

Catalog

1  rem

2   Media query

3   Media query +rem Change the element size

4   Media query import file

5  rem Program execution

6   Suning homepage simulation ( Technical proposal 1 )

6.1   Media query

6.2   Home page

7   Suning homepage simulation ( Technical proposal II )

---

1  rem

rem（root em） It's a relative unit , Be similar to em.em Changes as the font size of the parent element changes ,rem With html Element font size changes , such as html Of font-size Set to 12px Then set another div The width is 2rem, that div The width of is 24px

The advantage is to use rem In units of , We just need to modify it html Font size of , You can change the size of all elements , And it changes proportionally

Use rem You can do the following things

• Text can change with the size of the page
• Elements can be scaled proportionally with the page size ( Height can be adaptive )

2   Media query

Media query (Media Query) yes CSS3 New syntax , Add viewports before using media query

We can use media query to change html Of font-size, So as to control the size of all elements in the page

The syntax of media query is like this

mediatype It's the type of media , There are three common values

• all For all equipment
• print For printers and print previews
• screen For computer screen , The tablet , Smart phones and so on

mediatype Of and,not And only It's called keyword

• and And
• not Not
• only Only

media feature It's a media feature , We know the following three

• Be careful media feature Put parentheses in it

Let's do one below if the screen width is less than 800px The screen background color changes to cyan , Otherwise unchanged

When the width is less than 800px It was like this when I was young

Greater than 800px It was like this when I was young

You can judge a condition many times , Now I want the width to be less than 500px when , The background turns red ,500-800px Time turns blue ,800px No background color is set above

Width less than 500px when

500-800 Between

Greater than 800

have access to and Connect multiple judgment conditions , For example, I want to

• 500px The following is red
• 550px-800px It's blue

Other conditions do not set the background color

Then we can add min-width

500px following

500-550px

550-800px

800px above

3   Media query +rem Change the element size

When the width is less than 600px when , The box is like this

When the width is 600-700px In between , The box is like this

When the width is greater than 700px when , The box is like this

4   Media query import file

The grammar is like this

Let's do an example

red.css

cyan.css

When the screen width is less than 650px when , The box is red

Greater than 650px when , The box is blue

5  rem Program execution

First, choose the technical scheme , The principles of the two technical schemes are similar

You will get a prototype , Basically, I only give you one , If there are multiple pieces with different proportions, you need to use media query to judge the multi width

The width of the prototype is basically 750px Subject to

Then we define 750px when ,html Of font-size by 50px

• There has to be one font-size, Generally, we will choose this value , No matter what you choose, this value will not affect the aspect ratio of the element , If your font-size The larger you choose , The smaller your element will show , For example, I choose 100px, Then the width of the element will be font-size:50px Half the width of the element

Then you use it when defining the width and height of elements rem As a unit , For example, you see a width on the prototype 150px, high 200px Box , Then you should give it when you give it width:3(150/50)rem,height:4(200/50)rem

Finally, define media query , For example, you now write a width of 320px Media enquiries , Then you should take font-size It is amended as follows 21.33px = 320 / (750/50)

6   Suning homepage simulation ( Technical proposal 1 )

Suning mobile terminal homepage address   Suning e-buy (Suning.com)- Home appliances are packaged , Focus on service and save money ！

I did it 10 There are four functions , Next, just use the image of the son and the father

Used in the project less,less You can see this for a simple usage of

appendix 9-less Basics _Suyuoa The blog of -CSDN Blog

6.1   Media query

We focus on these pixel values

media.less

@diviend:15;

@media screen and (max-width:320px) {
    html {
        font-size:(320px/@diviend);
    }
}

@media screen and (min-width:320px) and (max-width:360px) {
    html {
        font-size:(360px/@diviend) ;
    }
}

@media screen and (min-width:360px) and (max-width:375px) {
    html {
        font-size:(375px/@diviend) ;
    }
}

@media screen and (min-width:375px) and (max-width:384px) {
    html {
        font-size:(384px/@diviend) ;
    }
}

@media screen and (min-width:384px) and (max-width:400px) {
    html {
        font-size:(400px/@diviend) ;
    }
}

@media screen and (min-width:400px) and (max-width:414px) {
    html {
        font-size:(414px/@diviend) ;
    }
}

@media screen and (min-width:424px) and (max-width:480px) {
    html {
        font-size:(480px/@diviend) ;
    }
}

@media screen and (min-width:480px) and (max-width:540px) {
    html {
        font-size:(540px/@diviend) ;
    }
}

@media screen and (min-width:540px) and (max-width:720px) {
    html {
        font-size:(720px/@diviend) ;
    }
}

@media screen and (min-width:720px) and (max-width:750px) {
    html {
        font-size:(750px/@diviend) ;
    }
}

@media screen and (min-width:750px) {
    html {
        font-size:60px ;
    }
}

6.2   Home page

index.less

// @import 'media';

@rate:25.6;
body {
    height:3000px;
}
//  Head newcomer gift bag 

.header {
    height:(45rem/@rate);
}

.header img {
    width: 100%;
    height: 100%;
}

//  The top of the search box 
.up_search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (38rem/@rate);
    background-color: yellow;
}

.up_search span {
    width:(18rem/@rate);
    height:(30rem/@rate);
    background-size: (18rem/@rate) auto;
    background-repeat: no-repeat;
    margin: 0px 17px;
}

.up_search span:nth-child(1) {
    background-image: url(../images/class.png);
}

.up_search span:nth-child(3) {
    background-image: url(../images/mine.png);
}

.up_search img {
    width:(195rem/@rate);
    height:(38rem/@rate);
}

//  Search box 

.search {
    position: relative;
    padding-top: (10rem/@rate);
    padding-bottom: (10rem/@rate);
    background-color: yellow;
}

.search input {
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    width: 95%;
    height:(35rem/@rate);
    border-radius:(22rem/@rate);
    text-indent: (40rem/@rate);
    font-size: (14rem/@rate);
    border:transparent solid 1px;
}

.search span {
    position:absolute;
    left:(25rem/@rate);
    line-height:(35rem/@rate);
    font-family: icomoon;
    font-size:(20rem/@rate);
    color:gray;
    z-index: 999;
}

//  Shuffling figure 
.rotate {
    position: relative;
    overflow: hidden;
    height:(120rem/@rate);
}

.rotate img {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    width:95%;
    height: 100%;
    border-radius: (15rem/@rate);
    z-index: 999;
}

.rotate_background {
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    background-color: yellow;
    width:150%;
    height:(90rem/@rate);
    border-radius: 0 0 70% 70%;
}

//  Interest free advertising 
.interest_free {
    height:(100rem/@rate);
    background:url(../upload/interset_free.gif);
    background-size: 100% 100%;
}

//  Ten functions 
.ten_function {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: (15rem/@rate);
}

.ten_function a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
}

.ten_function a img {
    width: (42rem/@rate);
    height: (42rem/@rate);
}

.ten_function p {
    font-size:(14rem/@rate);
}

I don't have a prototype at hand , I use... Directly iphone6 The displayed interface is regarded as a prototype , The displayed width is 375

I'm sure to 375px Benchmarking , Let's go back to the media query just generated css, find 375px Font size of

Found to be 25.6px, All subsequent element sizes , You can use first px to glance at , After reading it px Change to rem, Then divide by what we define rate, It can fit most screens

For example, my category button

Measured in the prototype is 18*30px, Then write it like this

Not all units need to use rem, Like the one below me margin It's used 17px, It still displays normally within a certain range

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/initialization.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="css/index.css">
    
    <title>Document</title>
</head>
<body>
    <section class="header"><img src="upload/new_one_199.gif" alt=""></section>

    <section class="up_search">
        <span></span>
        <img src="upload/cool_summer.gif" alt="">
        <span></span>
    </section>

    <section class="search">
        <span class="magnifier"></span>
        <input type="text" placeholder=" Air conditioner ">
    </section>

    <section class="rotate">
        <img src="upload/rotate.jpg" alt="">
        <div class="rotate_background"></div>
    </section>

    <section class="interest_free"></section>

    <section class="ten_function">
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
        <a href="#">
            <img src="images/ten_function/one.png" alt="">
            <p> Home appliance </p>
        </a>
    </section>
    
</body>
</html>

It is also used in slightly wider screens

7   Suning homepage simulation ( Technical proposal II )

The above is technical scheme I , Now let's take a look at the technical solution 2 In the process , In technical proposal II flexible.js

flexible.js Project address  GitHub - amfe/lib-flexible: Scalable layout scheme

There will be these files after unzipping

We copy the code of scheme one , hold media.css And media.less Delete , Create a file called js Folder , And then index.js Put in js in

stay index.html To shield off media.css, Then join script That line

stay flexible.js Except for 10, What we divide above is 15, Our prototype is 375px, So will index.less Of rate Change it to 37.5

If you don't use it here less, I don't want to calculate one by one with a calculator , Then you can use vscode Plug in cssrem, This plug-in is written by you px When , It will automatically convert you into rem, The usage is introduced here   Black horse programmer pink Teacher front-end introductory tutorial , Zero basis must see h5(html5)+css3+ Mobile front end video tutorial _ Bili, Bili _bilibili

After entering initialization.css Cancel in body Constraints of maximum width and minimum width

If you still want to constrain dimensions , You could write it like this

• There is no !important The weight of is not js The weight in is high , If only constraint body Without constraining font-size Words , Your page will not achieve the desired effect

In this way, we have finished scheme 2 , After opening, we can change the width , It will be silky in the process of changing the width ( There is no element size mutation )