[Front-end learning log] rem layout & media query & less basics

1. Rem basics

1. rem unit

• rem (root em) is a relative unit, similar to em, em is the font size of the parent element.
• The difference is that the base of rem is relative to the font size of the html element .
• For example, if the root element (html) sets font-size=12px; if the non-root element sets width:2rem; then replace it with px to indicate 24px.

The advantage of rem: the text size of the parent element may be inconsistent, but the entire page has only one html, which can well control the element size of the entire page

 /* 根html 为 12px */
html {
 font-size: 12px;
}/* 此时 div 的字体大小就是 24px */ 
div {
 font-size: 2rem;
}

2. Media inquiries

1. What are media queries

Media query (Media Query) is a new syntax of CSS3.

• Using @media query, you can define different styles for different media types
• @media can be styled differently for different screen sizes
• When you reset the browser size, the page will also re-render the page according to the browser's width and height
• At present, multimedia query is used for many Apple mobile phones, Android mobile phones, tablets and other devices

2. Media queries

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

• Note the @ symbol at the beginning of @media
• mediatype media type
• keywords and not only
• media feature media features must be enclosed in parentheses

3. mediatype query type

value	explain
all	for all devices
print	for printers and print preview
screen	For computer screens, tablets, smartphones, etc.

Divide different terminal devices into different types, called media types

4. Keywords

• and: multiple media features can be connected together, which is equivalent to the meaning of "and".
• not: Exclude a certain media type, which means "not" and can be omitted.
• only: Specify a specific media type, which can be omitted.

Keywords concatenate a media type or multiple media properties together as a condition for a media query.

5. Media Characteristics

Each media type has its own specific characteristics, and different display styles are set according to the media characteristics of different media types.

value	explain
width	Defines the width of the visible area of ​​the page in the output device
min-width	Defines the minimum visible area width of the page in the output device
max-width	Defines the maximum visible area width of the page in the output device

3. Less basics

1. Disadvantages of maintaining css

CSS is a non-procedural language, without variables, functions, SCOPE (scope) and other concepts.

• CSS needs to write a lot of seemingly illogical code, and CSS redundancy is relatively high.
• It is inconvenient to maintain and expand, and it is not conducive to reuse.
• CSS doesn't have good computing power
• 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.

2. Introduction to Less

Less (abbreviation for Leaner Style Sheets) is a CSS extension language, also known as a CSS preprocessor.

As a form of extension of CSS, it does not reduce the functions of CSS, but adds procedural language features to CSS based on the existing CSS syntax .

Based on the syntax of CSS, it introduces functions such as variables, Mixin (mixed in), operations, and functions, which greatly simplifies the writing of CSS and
reduces the maintenance cost of CSS. As its name says, Less Allows us to do more with less code.

Less Chinese URL: http://lesscss.cn/

Common CSS preprocessors: Sass, Less, Stylus

In a word: Less is a CSS preprocessing language that extends the dynamic nature of CSS.

3. Less basics

We first create a new file with the suffix less, and write the less statement in this less file.

• Less variables
• Compile Less
• Less nesting
• Less operation
• Less use

4. Less variables

A variable is something that has no fixed value and can be changed. Because some colors and values ​​in our CSS are often used.

@ variable name: value;

4.1 Variable naming convention

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

@color: pink;

body{ color:@color; } a:hover{ color:
@color;
}

4.2 Less Nesting

We often use the nesting of selectors

#header .logo { width: 300px; }

Less nested writing

#header { .logo { width: 300px; } }

if met(intersection|pseudo-class|pseudo-element selector)

• If there is no & symbol in front of the inner selector, it will be parsed as a descendant of the parent selector;
• If there is an & symbol, it is resolved to the parent element itself or a pseudo-class of the parent element.

a:hover{ color:red; }

Less nested writing

a{ &:hover{ color:red; } }

4.3 Less operation

Any number, color or variable can participate in the calculation. That is, Less provides addition (+), subtraction (-), multiplication (*), and division (/) arithmetic operations.

/*Less 里面写*/
@witdh: 10px + 5;
div {
 border: @witdh solid red;
}/*生成的css*/
div {
 border: 15px solid red;
}/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

Pay attention to
the writing of the multiplication sign (*) and division sign (/)

• There is a space in the middle of the operator to separate 1px + 5
• For an operation between two values ​​in different units, the value of the result of the operation is in the unit of the first value
• If only one value has a unit between the two values, the operation result will take that unit
  Note