Mobile web development -- rem layout and less

1, Basic knowledge

1. em unit

em is a relative unit. Its size depends on the font size of the parent element. If there is no parent element, it depends on the font size of the html element. If the font size of the parent element changes, the size of em changes accordingly.

2. rem unit

Rem is also a relative unit, similar to em, except that its size depends on the font size of html elements. For example, the root element (html) is set to font size = 12px; Set width for non root element: 2rem; Then replace it with Px, which means 24px.

If the font size of html elements changes, the size of rem will change accordingly.

Advantages of rem: the text size of the parent element may be inconsistent, but the whole page has only one html, which can well control the element size of the whole page.

2, Media query

1. Concept

Media query is a new syntax of CSS3, which can set different styles for different media types and different screen sizes. When we modify the browser window size, the page will also re render the page according to the window size.

2. Grammar

	@media mediatype and|not|only (media feature) {
    CSS-Code;
}

① mediatype query type

This attribute sets the media type we want to query, and divides different terminal devices into different types, called media types.

② And not only keyword

Keyword is used to connect media types or multiple media features as a condition for media query.

  • And: multiple media features can be connected together, which means "and".
  • Not: excluding a media type, which means "not" and can be omitted.
  • only: specifies a specific media type, which can be omitted.

③ media feature

There are three common media features:

④ Writing rules

Media queries are generally written from small to large, so we can omit some unnecessary code and make the code more concise.

Case:

⑤ Case code

/*1. On our screen and the maximum width is 800 pixels, set the style we want*/
 @media screen and (max-width: 800px) {
        body {
           background-color: pink;
       }
}
        
 @media screen and (max-width: 500px) {
      body {
        background-color: purple;
   }
 }
/* 2.Media queries are generally performed from large to small or from small to large */
        /* 2. The background color of pages smaller than 540px changes to blue */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 Our page color changed to green */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. Greater than or equal to 970, the color of our page is changed to red */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen And and must bring something that cannot be omitted */
        /* 6. Our number must be followed by the unit 970px, which cannot be omitted */

3, less

1. Introduction

Less (short for LeanerStyle Sheets) is a CSS extension language, also known as CSS preprocessor. He added the features of procedural language to CSS based on the existing CSS syntax. For example, variables, operations and functions greatly simplify the writing of CSS and reduce the maintenance cost of CSS, so that we can do more with less code. Each time the project runs, you need to treat the less file as a CSS file before it can work.

2. less variable

We usually define some commonly used colors and values as variables to modify variables, and modify all other calls.

Syntax: @Variable name:value;
@color: pink;

Syntax specification:

  • There must be a @ prefix
  • Cannot contain special characters
  • Cannot start with a number
  • Case sensitive

3. less nesting

Unlike css, the syntax definition of less can nest the css of child elements into the css of parent elements. Make the structure clearer and the code cleaner, but I personally prefer css style grid, because it is more convenient for later modification.

// css format
#header .logo {
  width: 300px;
}
// less format
#header {
    .logo {
       width: 300px;
    }
}

4. Intersection | pseudo class | pseudo element selector

In less, the writing method of intersection pseudo class pseudo element selector is different from that of css. It needs to be connected with &.

// css writing
a:hover{
    color:red;
}
// The writing of less represents the parent element a
a{
  &:hover{
      color:red;
  }
}

5. less operation

In less, any number, color or variable can participate in the operation. Less provides arithmetic operations of +, -, *, /. However, it should be noted that there must be a space on the left and right sides of the operator, and for the operation between two different units, the operation result takes the unit of the first value. If only one value between two values has a unit, the operation result takes that unit.

/*Less Inside*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*Generated css*/
div {
  border: 15px solid red;
}
/*Less Even so */
width: (@width + 5) * 2;

4, rem layout

1. Train of thought

Use media query to set the font size of html proportionally according to different sizes of different devices, and then use rem as the size unit for page elements. When the font of html changes with the screen size, other page elements will also change proportionally.

Our common mobile phone sizes are: 320px, 360px, 375px, 384px, 400px, 414px, 424px, 480px, 540px, 720px, 750px. It's so bald.

There are two technical schemes available: ① less + rem + media query ② flexible.js + rem, of which scheme ② is simpler to use.

2. less + rem + media query

Idea:

① assuming that the screen width is 750px, we divide the whole screen into 15 equal parts (the division standard is arbitrary).

② take the size of a screen as the size of html font, which is 50px at this time.

③ similarly, in a 320px wide device, the font size is 320 / 15, which is 21.33px.

④ if we divide the size of page elements by the size of corresponding html text, their proportion will be the same. At this time, we realize the equal scaling effect of page elements.

⑤ a page element of 100 * 100 pixels is converted from 100 / 50 to REM, which is 2rem * 2rem, and the ratio is 1 to 1. On the 320 screen, if the html font size is 21.33, 2rem= 42.66px. At this time, the width and height are both 42.66, but the ratio of width to height is still 1:1

Summary:

① formula: rem value of page element = page element value (px) / (screen width / number of copies divided)

② screen width / number of copies divided is the size of html font.

Case:
   @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
            }
        }
        
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
            }
        }
        
        div {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
        /* 1. First, we choose a standard size of 750 
        2. We divide the screen size by the number of copies we divide to get the text size in html, but we know that the text size is different under different screens */
        /* 3. rem value of page element = px value of page element at 750 pixels / text size in html */

3,flexible.js + rem

Idea:

Flexible.js is a concise and efficient mobile terminal adaptation library developed by the mobile Taobao team. We don't need to write media queries on different screens. It has been processed internally. Its principle is to divide the current equipment into 10 equal parts, but the proportion is the same under different equipment. We only need to define the size of our html font, and the rest can be done by flexible.js.

Summary:

① flexible means that the screen is divided into 10 equal parts by default

② if we want to modify the default settings, we can set them through media query, and then raise the style weight to the highest.

Tags: less html css

Posted on Sat, 18 Sep 2021 16:25:38 -0400 by weyes1