REM layout

rem Layout

One 、rem Basics

1.em Is relative to Parent element Of font size
2.rem Is relative to html Elements Of font size

rem The advantages of ： It can be modified by html The overall size of page elements is controlled by the text size inside

Two 、 Media query

mediatype：all（ All devices ）、print（ Printer and print preview ）、screen（ Computer screen , Flat , mobile phone ）
keyword ：and（ And ）、not（ Not ）、only（ Specify the media type of a certain type , It can be omitted ）
Media features ：width、min-width、max-width

        /*  On screen   also   The biggest width is 300 Pixels   Set the style you want  */
        /*  From small to large  */
        @media screen and (max-width: 300px) {
    
			
        }
        @media screen and (min-width: 301px) {
    
        
        }
        @media screen and (min-width: 501px) {
    
			
		}

Media queries can be written from small to large or from large to small , But use From small to large It will be more concise （css Layering ）

3、 ... and 、Less Basics

（1）less Variable

@color: pink;
body {
    
    background-color: @color;
}

（2）less compile

（3）less nesting

.nav {
    
    width: 200px;
    height: 200px;
    background-color: pink; //  Descendant selector  .logo {
    
        color: red;
    }
    a {
    
        //  Pseudo class selector  &:hover {
    
            color: blue;
        }
        //  Pseudo element selector  &::before {
    
            content: "";
        }
    }
}

&： pseudo-classes 、 Pseudo elements 、 Intersection selector

（4）less operation
less Provided with the addition of （+） reduce （-） ride （*） except （/） Arithmetic
Operator There must be spaces on the left and right
Two numbers are involved in the operation , If only one number has units , The final result is based on this unit
Both numbers have units , And the two units are different , Subject to the first unit

@border: 5px + 5;
div {
    
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}
img {
    
    width: 82 / 50rem;
    height: 82 / 50rem;
}

Four 、rem Adaptation scheme

Method ： Use media query to set up proportionally according to different devices html Font size of , Then page elements use rem Make the unit of measurement , When html When the font size changes , The element size will also change , So as to achieve the matching of proportional scaling .


Technical proposal 1 ：less + Media query + rem



Example ： Suning homepage production
Static website ： Home page of Suning mobile terminal 1

Technical proposal II ：flexible.js + rem

Note that it is divided into 10 Equal parts