网页自适应PC端和移动端

如何让网页自动适应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.