html页面怎样能够自适应电脑屏幕宽度？

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

扩展资料：

自适应网页设计（Adaptive  Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例，里面是六个主人公的头像。

如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。

不知道什么时候开始，国内开发者都喜欢说H5，说实话，HTML升级了不假，单另一个分之好想说H5就很洋气真的就是有点驴唇不对马嘴了。

调试网页，H5，HTML，WebApp，H5App，管它叫什么呢，在不同比例下不需要任何辅助工具，Mac Safari即可完成页面调整，而且比例看得清，妈妈再也不用担心我的页面适配不好了。

步骤：

1、Safari打开“开发”模式

2、打开响应式设计模式

3、欢快的使用预置页面比例，也可以上下左右拖拽到合适的尺寸

举例说明：

1、打开开发模式，多数机器正常Safari开发模式是默认关闭的，一般我们调试网页会用firebug，或者chrome抓request或请求。所以第一步是打开开发者模式，在Safari里系统偏好设置-高级，菜单栏显示 开发 blabla...勾起来。

2、开发-进入响应式设计模式

3、撒欢吧，顺便说一句，它还可以模拟1x，2x，3x图的显示，iOS开发的老铁们双击666，甚至可以选择浏览器内核，做一些JS验证就比较方便了

1、打开“我的电脑”，进入到页面以后，双击“属性”，进入到下一个页面。

2、在页面中找到控制面板这个选项，然后双击进入。

3、然后在控制面板的界面中找到“外观和个性化”的这个图标，双击进入下一界面。在新的界面里找到“文件资源管理器选项”的图标，在此图标有两个选项，选择“显示隐藏的文件和文件夹”。单击进入。

4、最后在文件资源管理器选项左上角的菜单一栏里，单击“查看”选项。再从下面的“高级设置”的栏目里下拉，找到“隐藏已知文件类型的扩展名”这一行，把前面的打勾去掉，就可以直接修改html网页内容了。

---