如何让网页自动适应PC端和移动端
只需增加这么一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- viewport是view portion的意思，用汉语说，就是“可见区域“。所以这个标签是在定义可见区域的规则。
- width=device-width的意思是”宽度自动适配设备屏幕宽度"
- inital-scale=1.0的意思是“初始宽度为屏幕宽度的1倍”，实际上就是设备宽度。
w3schools.com里也描述的很清楚，如下：
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.