How to write Adaptive Web pages on the mobile side

First, the head part of the HTML page introduced <meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1" > Content Property Value: Width: The range of the viewable area, the value can be a number or keyword Device-widthintial-scale: The first time the page is displayed is the zoom level of the viewable area, Value 1.0 The page is displayed in actual size without any scaling maximum-scale=1.0, minimum-scale=1.0, zoom level of the viewable area, and 1.0 prevents the user from zooming in on the actual size. User-scalable: Whether the page can be scaled, no prohibit scaling two, calculate the page base size

<script>var basesize = 10,//radix    basewidth = 375,//volume value size    fontSize =  ( Document.documentelement.clientwidth/basewidth * basesize). toFixed (2); $ (document). Ready (function () {    $ (' HTML ' ). CSS (' font-size ', fontsize+ "px");}); </script>

That is, when the device width is 375, the font size base is 10, and the font size base value is proportional to the device width when other widths are added.

The size of the part that needs to be adapted is measured by REM. A REM value inherits the font cardinality value of the html,body. (EM units are the font size of the nearest ancestor element)

How to write Adaptive Web pages on the mobile side