rem layout

em: relative unit, which refers to the multiple of the font size of the parent element, if it is 2em, it means twice the font size

rem: relative unit, the reference is the multiple of the font size of the root element html, if it is 2rem, it means twice the font size of the html element

Rem advantage: The reference element is html, and there is only one html element in a page, which can achieve overall control.

1. Media Query:

Using @media query, you can define different styles for different media types
@media can set different styles for different screen sizes
When you reset the browser size, the page will be re-rendered according to the width and height of the browser

1.1 Syntax specification

Start with @media, pay attention to @
mediaType media type
Keywords and | not | only
media feature media feature, must be enclosed in parentheses

@media screen and (min-width: 800px) {
      
      
    body{
      
      
      background-color: pink;
    }
  }

1.2 Media type

Divide different terminal devices into different types, called media types

all: for all devices

print: for printer and print preview

screen: used for computer screens, tablets, smart phones

1.3 Keywords

The key word is to connect the media type and multiple media characteristics together as a media query condition

and: multiple media query features can be linked together, which is equivalent to and

not: exclude a certain media type, which is equivalent to the meaning of non and can be ignored

or: You can test multiple media query conditions, only if one condition is established, it will be executed, or it means

only: specify a specific media type, can be omitted

1.4 Media characteristics

Each media type has different media characteristics. According to the media characteristics of different media types, different display styles are set, and parentheses should be added to include.

width: the width of the visible area of the page

min-width: the minimum visible area width of the page

max-width: the maximum visible area width of the page in the output device

2, css drawbacks

css is a non-procedural language, without the concepts of variables, functions, SCOPE (scope), etc.

CSS needs to write a lot of seemingly illogical code, CSS redundancy is very high
Inconvenient to maintain and expand, not conducive to reuse
css does not have good computing power, it can only calculate the value manually
For non-front-end development engineers, it is often difficult to write well-organized and easy-to-maintain css code projects due to lack of css writing experience

3、Less

Less is a css extension language and css preprocessor
As an extension of css, it does not reduce the function of css, but on the basis of the existing css grammar, adding programs to css is a feature of the language
Based on the syntax of css, it introduces functions such as variables, mixins, operations and functions, which greatly simplifies the writing of css and reduces the maintenance cost of css, allowing us to do more with less code Things.

Summary: Less is a CSS preprocessing language, which extends the dynamic characteristics of CSS.

3.1 Less variables

Must be prefixed with @
Cannot contain special characters
Cannot start with a number
Case Sensitive

@color:pink;

body{
    
    
  color: @color;
}

3.2 Less compilation

Essentially, Less contains a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules will eventually be compiled and generated by the parser to generate corresponding CSS files.
We need to use our .Less file, compile and generate the .css file, so that the html page can be used
In the current folder, use cmd commandlessc style.css > style.css

3.3 Less nesting

If you encounter (intersection | pseudo class | pseudo element selector)

If there is no ampersand in front of the inner selector, it is parsed as a descendant of the parent selector
If there is an ampersand, it is parsed as a pseudo-class of the parent element itself or the parent element

/* html */
 <div class="header">
    <div class="logo"> </div>
  </div>

/* css */
.header{
    
    
  width: 200px;
  height: 200px;
  background-color: pink;
  .logo{
    
    
    width: 100px;
    height: 100px;
    background-color: plum;
  }
}

Add ampersand

<div class="content">
 <div class="top"></div>
 <div class="bottom"></div>
</div>

/**/
.content{
    
    
  height: 200px;
  width: 200px;
  background-color: royalblue;
  div{
    
    
    width: 100px;
    height: 100px;
    background-color: sandybrown;
    &.top{
    
     /*表示选中content下边class等于top的div元素*/
      background-color: #000;
    }
  }
}

3.4 Less operation

Any number, color or variable can participate in the calculation, +-* /

The two numbers involved in the calculation can have a unit and the other without a unit, and the final unit is the only unit

The less operator must add spaces around

4. Rem adaptation scheme

Option 1: less+media query+rem

Rem value of page element = page element value (px) / html font-size font size

Option 2: flexible.js+rem

5. Less file import

An index.less file imports another common.less file, the syntax is:@import 'common';

Big front-end basics~rem and media query