The second mobile development easy pick, rem layout

First, why should use rem layout

Earlier I wrote advantage of flex layout, number of copies and distribution arrangement telescopic container boxes box accounted for the neutron, it unaffected by screen zoom, making the layout easy. However, in some cases, inevitably give the box to set height values, and how to height ratio of the screen size changes with scaling it? In addition, how to make the page text size changes with the size of the screen and zoom it? rem layout can easily solve this problem.

Second, the principle rem layout

1.rem

We must first understand what is REM, REM ( root EM) is a relative unit, 1rem value is in html page size of font-size . In the layout, the local use rem set the width and height as the basic unit, so that we can make the zoom ratio and other page elements by controlling the size of the font-size page.

2. Media inquiries and less. (Less content as understanding)

CSS3 media queries are new syntax, the use @media query, you can define different styles for different media types. In rem layout, screen size is based on the change, the value of the font-size determination html.

Less (LeanerStyle Sheets abbreviation) is a CSS extension language , has become the CSS preprocessor. It is the basis of CSS syntax above, the introduction of variables, Mixin (mixed), as well as operational functions and other functions , greatly simplifies the preparation of CSS, and reduce maintenance costs of CSS.

To calculate the value of the rem (box width and height values px / 1rem accounted px = width and height values representing the values rem) is mainly used in less rem layout file. EasyLess install the plug-in vscode can automatically generate a file of the same name with less css files, css in the page can be introduced. But this conversion is too much trouble, we usually use flexible.js development can replace the function of less file.

3.flexible.js

flexible.js js file is a good package. You can calculate how much px 1rem value equal to the value for conversion between px and rem values directly, there is no less a document is calculated. The principle is the size of the screen is divided into 10 equal parts, each the size of a value 1rem, page elements are to be represented rem width and height, such as the screen size changes, the page elements will be scaled. But using flexible.js advance to set the global set of font-size inside cssrem fixed size, typically sized draft divided by 10.

Third, examples

1. To achieve the effect is as follows, we can find its elements according to the size of the page and scaling.

750px screen below:

Under 500px screen effect:

2. Implementation

There are two ways to achieve rem layout, the first one is rem + less + media queries, but less in terms of more trouble, so we often use the second. The second case is rem + flexible, this paper is made using this method.

3. step.

And building first introduced flexible.js page structure (first page set in the setting the default font size 750px / 10 = 75px).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem布局详解</title>
    <script src="js/flexible.js"></script>       <! - the introduction of the onscreen flexible.js 1rem determination value -> 
    < Link the rel = "this stylesheet" the href = "CSS / normalize.css" >     <! - the introduction of the common pattern -> 
    < Link the rel = " this stylesheet " the href =" css / index.css " >     <-! incorporated css style -> 
</ head > 
< body > 
    < header > 
        < span class =" Classify " > </ span >       <-! left Categories sign ->
        <form action="">                     <! - the intermediate search box -> 
            < INPUT type = "Search" placeholder = "buy double eleven" > 
        </ form > 
        < A the href = "#" class = "Login" > login </ A >    < ! - right side of the login logo -> 
    </ header > 
</ body > 
</ HTML >

Then write css styles are as follows:

ps. We write in style when writing the page corresponding to the value of px, flexible.js rem is generated corresponding to the value directly, you can see the following code is the unit of length rem.

The first step, adding a media query. Provided when the page is larger than the width of the draft design, also provided according to the design draft font-size width size. Html font size set easily be covered, so add! Important to mention the right to carry out.

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

Step two: body modification. i.e., if the design draft 10rem body width. Then the on-screen zoom.

body{  
    width: 10rem;
    margin:0 auto;
}

The third step: header writing, use fixed positioning.

header { 
    the display : Flex ;   / * Parent telescopic cartridge box layout attributes added * / 
    position : Fixed ; 
    Top : 0 ; 
    left : 50% ; 
    Transform : the translateX (-50%) ; 
    width : 10rem ; 
    height : 1.173333rem ; 
    background- Color : # ffc001 ; 
}

IV: The remaining code as follows:

* { 
    Margin : 0 ; 
    padding : 0 ; 
} 
.classify { 
    width : .586667rem ; 
    height : .933333rem ; 
    background : URL (../ Images / classify.png) NO-REPEAT ; 
    background-size : .586667rem ; 
    margin : .333333rem .093333rem .146667rem ; 
} 
header form { 
    Flex : 1 ;     / * sub exclusive cartridge 1 part residual space * / 
}
header input{
    width: 100%;
    height: .906667rem;
    margin-top: .133333rem;
    border-radius: .453333rem;
    background-color: #fff2cd;
    padding-left: .746667rem;
    font-size: .32rem;
    border: none;   /* 去除边框和轮廓线 */
    outline: none;
}
.login{
    /*display: block; Father telescopic cartridge box layout, there is no need * / 
    margin : .133333rem .266667rem ; 
    height : .906667rem ; 
    Line-height : .906667rem ; 
    font-size : .333333rem ; 
    Color : #fff ; 
    TEXT- Decoration : none ; 
}

Four: summary

Rem obvious benefits we can get to see, of any length can be replaced rem units, such as page elements can be scaled page size changes. Usually the actual development with the development of the hybrid flex + rem mode.

The second mobile development easy pick, rem layout

Guess you like