quot自适应网页设计quot的核心，就是CSS3引入的MediaQuery模块它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件ltlink rel=quotstylesheetquot type=quottextcssquotmedia=quotscreen and maxdevicewidth400pxquothref=quottinyScreen。

html， body width100vh。

ltltspanmeta name=“viewport” content=“width=devicewidth， initialscale=10， minimumscale=05， maximumscale=20， userscalable=yes” 在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的。

方法一按住ctrl键然后在滑动鼠标，向下滑是缩小，向上滑是放大方法二点击浏览器的“页面缩放”，在移动到相应的比例就好方法三浏览器现在设置里都有一个选项是适应屏幕点击适应屏幕即可自动适应当前页面大小。

自适应网页设计Adaptive Web Design指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术 2010年，Ethan Marcotte提出了“自适应网页设计”Responsive Web Design这个名词，指可以自动识别屏幕宽度并做出相应调整的网页设计。

HTML5里面自动适应手机屏幕的高度方法使用meta标签，这也是普遍使用的方法 ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot解释该。

这就算是感应式设计了，也就是本文说的“屏幕自适应”由于设备分辨率不同，长宽比不同，如果设计一次，就要适应所有的屏幕包括PC，这个几乎是不可能的主要有以下三种情况1 如果等比例缩放，内部位置关系会发生变化。