Rem based

Rem unit

Rem (root EM) is a relative unit, similar to EM, which is the font size of the parent element.

The difference is that REM is based on the font size relative to HTML elements.

For example, set font size=12px for the root element (HTML); Width :2rem; If I change it to PX, it’s 24px.

/* The root HTML is 12px */ HTML {font-size: 12px; } /* The size of the div is 24px */ div {font-size: 2rem; }Copy the code

Rem’s advantage: The parent element text size may be inconsistent, but the entire page has only one HTML, which gives you good control over the size of the entire page.

Media queries

What is media inquiry

Media Query is a new SYNTAX for CSS3.

  • Using @media queries, you can define different styles for different media types
  • @Media can set different styles for different screen sizes
  • When you resize the browser, the page will also be rerendered according to the width and height of the browser
  • At present, multimedia query is used for many apple phones, Android phones, tablets and other devices

Media query syntax specification

  • Start with @media and notice the @ sign
  • Mediatype mediatype
  • Keyword and not only
  • Media feature The media feature must be contained in parentheses
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
Copy the code
  1. Mediatype Query type

Different terminal devices are divided into different types, called media types

  1. The keyword

Keyword connects media types or multiple media features together as the condition for a media query.

  • And: can link multiple media features together, equivalent to and.
  • Not: Excludes a media type. It is equivalent to “not” and can be omitted.
  • Only: specifies a specific media type, which can be omitted.

  1. Media properties

    Each media type has its own specific characteristics and sets different presentation styles according to the media characteristics of different media types. Let’s take a look at three.

    Notice they have to be enclosed in parentheses

  1. Media query writing rules

    Note: To prevent confusion, we write media queries in either small to large or large to small order, but we prefer to write media queries in small to large order so the code is cleaner

Less basis

Disadvantages of CSS maintenance

CSS is a non-procedural language without concepts such as variables, functions, and scopes.

  • CSS requires a large amount of seemingly illogical code to be written, and CSS redundancy is relatively high.
  • It is not convenient to maintain and expand, and is not conducive to reuse.
  • CSS does not have great computing power
  • For non-front-end developers, it is often difficult to write well-organized and maintainable CSS code projects because of their lack of CSS writing experience.

Less is introduced

Less (short for LeanerStyle Sheets) is a CSS extension language, also known as the CSS preprocessor.

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

Based on the syntax of CSS, it introduces variables, mixins, operations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS. As its name suggests, Less allows us to do more with Less code.

Less Website: http://lesscss.cn/

Common CSS preprocessors: Sass, Less, and Stylus

Less is a CSS preprocessor language that extends the dynamic nature of CSS.

Less installation

① To install nodeJS, choose 8.0 version and go to nodejs.cn/download/

② Check whether the installation is successful, use CMD command (Win10 is Windows +r open run CMD) — enter “node -v” to check the version

③ To install Less online based on nodeJS, run the NPM install -g Less command

4 Check whether the installation is successful. Run the lessc -v command to check the version

The variable used by Less

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

@ Variable name: value;Copy the code
  • Must be prefixed with @
  • Cannot contain special characters
  • You can’t start with a number
  • Case sensitivity
@color: pink;
Copy the code

Less Compiles the Vocode Less plug-in

The Easy LESS plugin is used to compile LESS files into CSS files

After installing the plug-in, reload vscode.

Simply save the Less file and the CSS file will be generated automatically.

Less nested

// Change the CSS to less # header. logo {width: 300px; } #header { .logo { width: 300px; }}Copy the code

If you met (intersection | pseudo-classes | pseudo element selector), use & connection

a:hover{ color:red; } a{ &:hover{ color:red; }}Copy the code

Less operation

Any number, color, or variable can be used. Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/).

/*Less */ @witdh: 10px + 5; div { border: @witdh solid red; } /* Generated CSS */ div {border: 15px solid red; } /*Less */ width: (@width + 5) * 2;Copy the code
  • How to write multiplication (*) and division (/)
  • The 1px + 5 operator is separated by a space between the left and right
  • For an operation between the values of two different units, the resulting value takes the units of the first value
  • If only one value between two values has a unit, the result of the operation takes that unit

Rem adaptation scheme

1. Make some elements that cannot be proportionally adaptive to be proportionally adapted to the current device when the size of the device changes.

2. Use media query to set the HTML font size proportionally according to different devices, and then use REM as the size unit for page elements. When the HTML font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling.

Technical solution:

1. Less + REM + media

2.lflexible.js+rem

Conclusion:

Both options now exist.

Option 2 is simpler, and at this stage you don’t need to know the JS code.

Rem actual development adaptation scheme 1

① Let’s say the design is 750px

② Suppose we divide the whole screen into 15 equal parts (the dividing standard can be 20 or 10 equal parts)

③ Each copy as HTML font size, here is 50px

④ On a 320px device, a font size of 320/15 is 21.33px

⑤ Divide the size of our page elements by the different HTML font sizes and you will find that the ratio is still the same

⑥ For example, we take 750 as the standard design draft

⑦ A 100100 pixel page element under 750 screen is 100/50 converted to REM is 2rem2REM ratio is 1 to 1

⑧ Under the screen of 320, the HTML font size is 21.33, then 2rem= 42.66px. At this time, the width and height are 42.66, but the ratio of width and height is still 1:1

⑨ But you can already scale the page element boxes equally under different screens

Conclusion:

① Final formula: page element REM value = page element value (px)/(screen width/partition number)

② The width of the screen/partition number is htmlfont-size size

Rem value = page element value (px)/HTML font size

Rem adaptation scheme 2

Mobile taobao team out of the simple and efficient mobile end adapter library

We no longer need to write media queries on different screens because js does the processing inside

The principle is to divide the current device into 10 equal parts, but the proportion is the same for different devices.

All we need to do is determine the HTML text size of our current device

For example, if the current design is 750px, all you need to do is set the HTML text size to 75px(750px / 10)

The rem value of the page element: the px value of the page element / 75

Let flexibility.js do the rest

Github address: github.com/amfe/lib-fl…

Conclusion:

Flexible is the default for dividing the screen into 10 equal parts

But hopefully you don’t have to reset the HTML font when the screen is larger than 750

So set it up yourself via media query

And you want to put the highest weight on it

VSCode PX conversion REM plugin CSSREM

Since the automatic conversion of CSS to REM in CSSREM is based on the 16 conversion of the default plug-in, you need to configure your own