How to make Mobile website adaptive device screen width? Transferred from Baidu Experience

Mobile phone or tablet screen size gap, so the width is different when opening a Web page, the new mobile phone site How to adapt to the width of the page, there are some difficulties, fortunately the program apes think of this, in the code to do so set, the following simple explanation.

Tools/Materials

• Write code software, Notepad or DW can all
• Phone or tablet one, do the test

Method/Step

1. Method: Add a META tag to the page header: <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, User-scalable=yes "/>

   Explain:

   Width=device-width: Width equals width of device screen

   initial-scale=1.0: Indication: Initial zoom ratio

   minimum-scale=0.5: Representation: Minimum zoom ratio

   maximum-scale=2.0: Indicates: Maximum zoom ratio

   User-scalable=yes: Indicates whether the user can adjust the zoom ratio

2. In addition: If you want to control the size of the font, you should use the relative size, you can use the following code, generally do not also can, here is just a way to say the name.

   Font of relative size

   The font also cannot use the absolute size px, but only the relative size of EM.

   Body {font:normal 100% Helvetica, Arial, Sans-serif;}

   The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.

   h1 {font-size:1.5em;}

   Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

   small {font-size:0.875em;}

   The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

How to make Mobile website adaptive device screen width? Transferred from Baidu Experience