The difference between PX, EM and REM

Px: a box is 100px by 100px. Px refers to logical pixels, also known as CSS pixels. Font-size :20px; mso-font-kerning: 0pt; mso-font-kerning: 0pt; mso-font-kerning: 0pt; mso-font-kerning: 0pt; 1em = 20px 10em = 200px

Em is weak: it is relative to the font size of the parent element. It is also inappropriate to use em because it is always relative to the font size of the parent elementCopy the code

Rem: r indicates root. Root refers to the root of the HTML tag. Rem ==> Font size in the HTML tag

For example, the font size of the HTML tag is 34px 1rem = 34px 2REM = 68px 3rem = 102px

What is adaptation

Adaptation: Display large box on large screen, small box on small screen.

What is adaptation? If it’s a big screen, let’s make it a little bit bigger on the box or on the font if it’s a little bit smaller on the screen

Implement adaptation

Implement adaptation through media query

Use media queries for adaptation: Media queries are similar to if-else in programming languages

I have a design, one line of text, 10 words, on 750 screens, it’s a full line. There’s also a picture that takes up half of the screen. Need to use media query + REM to match, the steps are as follows:

1. In general, the size of a design draft is 750px.

2. Usually we also adjust the browser emulator to 750px

3. Strictly in accordance with the design draft, with REM as the unit, to restore the design draft.

4. To start writing styles, I need to determine the fontsize of the HTML tag. I usually set fontsize to 100px, which is called the rem reference value.

   I have a box with width 20px and 1rem = 100px. So the box is 20px and it’s going to be rem and it’s going to be 0.2rem

I have a box with width 20px and 1rem = 100px. The box is 20px and if I change it to REM, if I change it to 0.2 REM, I measure the width of the box to 55px, if I change it to REM, it's 0.55rem. To put it more simply, measure the design, and the measured Px units will be divided by 100 to create REM units. You don't need to adapt, and you will restore the 750 design on a 750px screen.Copy the code

5. The last step, the written page, migration to other screens, complete adaptation. Conversion is also required during migration. Font size for HTML is 100px on a 750px screen. Font size for HTML is 50px on a 375px screen. Font size for the HTML is 42.6666666 pixels on a 320px screen. On a 414px screen, the font size of the HTML is 55.2px.

If you use media query + REM to adapt, you need to write the following code:

@media only screen and (width:375px) { html{ font-size: 50px; }} @media only screen and (width:320px) {HTML {font-size: 42.6666px; }} @media only screen and (width:414px) {HTML {font-size: 55.2px; }} / /... / /... / /...Copy the code

If we write a lot of screens to fit, then we need to write a lot of media query code.Copy the code

JS + rem adaptation

JS+ REM for adaptation, the steps are as follows:

let docEle = window.document.documentElement; / / said access window / / this function is used to calculate different screen HTML tags of the font - size function refresh () {let width = docEle. GetBoundingClientRect () width / / the width of the screen If (width>750){width=750} let fs = width / 7.5 document.querySelector(" HTML ").style.fontsize = fs + "px"} refresh(); //resize is called window.adDeventListener ("resize",()=>{refresh() }) // The pagesHow page displays window.adDeventListener (" pagesHow ",()=>{refresh()}) </script>Copy the code

Advantages:

The rem unit is determined by the font size of the root element. As long as the value of font size is changed, the size of the element with REM as the fixed unit will also change in response

Disadvantages:

Font size must be controlled by a piece of JAVASCRIPT code that must be placed before the page is first loaded and before the CSS style code is introduced.

Percentage layout fit

Percentage layout scheme: Set the percentage of elements. For example, if two divs want to occupy 100% of the width, then set the width of one div to 50%, so that the width is not fixed, so that it can be adapted in different resolutions. Then we need to be clear about the question: Who is the percentage of each child element or attribute set according to?

1. The percentage used in the width or height of a child element is relative to the percentage of the child element’s immediate parent, margin and padding: The percentage of border-radius is relative to the width of the parent element, both vertically and horizontally, and independent of the height of the parent element: the percentage of border-radius is relative to its own width, independent of the parent element

Advantages:

The width is adaptive and can be adapted at different resolutions

Disadvantages:

The value of percentage is not easy to calculate, so you need to determine the size of the parent, because you need to calculate according to the size of the parent. If you use percentage in each attribute, the height of the attribute relative to the parent element is not the only one that is difficult to set, and usually you need to fix the height.

Vw, VH scheme

New units vw and Vh related to viewports are introduced in CSS3. Vw represents the width relative to the viewport and Vh represents the height relative to the viewport

Vw unit conversion: if the viewport width is 100VW, which covers the entire viewport area, 1VW is equivalent to 1% of the entire viewport width, so 1px= 1/375*100 VW, all page elements can be directly calculated and converted into VW units. However, such calculation is similar to the percentage calculation, which is more troublesome. This can be solved with a plugin, postCSS-px-to-viewPort, which can preprocess CSS and convert PX units to VW units, but requires some webpack configuration

    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375,
        		viewportHeight: 1334,
        		unitPrecision: 3,
        		viewportUnit: 'vw',
        		selectorBlackList: ['.ignore', '.hairlines'],
                minPixelValue: 1,
                mediaQuery: false
        	})
    	]
}
Copy the code

Postcss-px-to-viewport postcss-px-to-viewport postcss-px-to-viewport

Advantages:

Specify the width and height of vw\vh relative to the viewport. It is easy to convert px to VW units using postCSs-px-to-viewport

Disadvantages:

When converting units directly, the percentage may appear as a decimal, which is inconvenient to calculate. Compatibility – most browsers support it, ie11 does not support a few lower versions of mobile operating systems ios8 and android4.4 do not support it

conclusion

There are some advantages and disadvantages for the above various mobile web page adaptive schemes. The specific scheme to use depends on the actual situation. Through looking at the source code of some well-known web pages, I found that it may not be a single use of a certain scheme, but a combination of several schemes in mobile terminal adaptation. On a page, element widths have percentages, rem, font styles have REM, EM, and fixed-size PX; Media queries are also used when screen widths are too large, and responsive design is more likely to be adaptive across devices. For the adaptive scheme of mobile web page, the most popular and most used scheme is REM layout.