1. The configuration

Width =device-width Indicates that the page width is equal to the device width initial-scale Indicates the initial page scaling ratio (page scaling is not allowed) user-scalable=no Indicates that users are not allowed to manually scale the page maximum-scale=1.0 Minimum -scale=1.0 Minimum -scale: 1Copy the code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, Minimum-scale =1.0"> <script SRC ="./vconsole.min.js"></script> <script> var vconsole = new vconsole (); console.log(123) </script> <! -- width=device-width Sets the page width equal to the device width initial-scale Scaling ratio of the initial page (page scaling is not allowed) user-scalable=no Users are not allowed to manually scale the page maximum-scale=1.0 Minimum-scale =1.0 Minimum-scale =1 -> <! -- <meta name="viewport" content="width=device-width, > <title>Document</title> <style> div{/* width: 200px; height: 200px; */ /* background: red; */ } </style> </head> <body> <! Viewport set the default page width to 980px --> <div></div> <! -- uniapp flutter weex rn --> </body> </html>Copy the code

Unit 2.

The font size of the current element is calculated relative to the font size of the parent element or rem relative to the size of the ancestor element with the font size attribute set Font size relative to HTML elements Set the calculated size Vh /vw relative to vw Relative to the width of the current browser window vh relative to the height of the current browser window divides the width or height of the current browser window into 100 equal portions calc(expression) can be +-*/ The operator must be preceded by a space wide: calc(100%-20px);Copy the code

3. Mediaquery mediaquery

Suitable for different screen widthsCopy the code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> div{width: 200px; height: 200px; background: red; } /* @media screen and width min-width */ @media screen and (max-width:980px) and (min-width: 500px) { div{ background: pink; } p{ color: brown; } } @media screen and (max-width:500px){ div{ background: blue; } p{ color: burlywood; } } </style> </head> <body> <div></div> <p>123</p> </body> </html>Copy the code

4. Mobile console

    <script src="./vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        console.log(123)
    </script>
Copy the code