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

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

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

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

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

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

扩展资料：

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

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

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

你说的这个叫媒体查询，是CSS3里面的概念。

通过媒体查询，可以根据不同的屏幕分辨率使用不同的显示策略。

媒体查询的使用方式如下：

@media (min-width:800px) and (max-width:1200px) {  }

即：屏幕分辨率大于800，小于1200的使用这个策略。

这样就可以根据不同的屏幕分辨率在css样式里设置的宽度了。

试用css3 语法@media screen and (判断属性){ CSS样式选择器 }

1、DIV+CSS小案例描述

根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现的自由缩放；

HTML代码如下：且仔细看清每一行的注释：

2、看下实现的效果如何：文字大小是如何变化的；

变化浏览器后效果：如图

自定义缩放其实主要就是判断浏览器的宽度，高度需要的话可以设置，还有设置内部区域块儿的宽度以及展示用百分比来控制；

以上就是关于html页面怎样能够自适应电脑屏幕宽度全部的内容，包括:html页面怎样能够自适应电脑屏幕宽度、怎样在CSS里根据显示器分辨率调整大小以px为单位的图片宽度、css3怎么实现屏幕自适应等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！