CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。
随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们CSS布局时仍然需要至少考虑1024px分辨率用户），如果网页布局宽度固定到1200px，1024分辨率用户浏览网页时浏览器下方会出现滚动条，为了解决这个问题，大家可以通过使用CSS3样式判断用户浏览器宽度从而调用不同布局宽度。
使用CSS单词与语法
@media screen and (判断属性){ CSS样式选择器 }
这里注意花括号里装要变化CSS样式选择器。
三、不同分辨率显示不同宽度样式案例
1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于1200px时候显示宽度为900px。
2、CSS代码
代码如下:
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。
3、HTML代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>
4、为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html
代码如下:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
将JS代码放入</head>标签前即可，这里直接引人google在线JS，你可以下载此JS文件重新HTML引人即可。
5、完美兼容各大浏览器HTML+CSS+JS源代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>
分享到：
相关推荐
在这种情况下，左侧的子元素可以通过设置较大的`flex-grow`值实现自适应宽度，而右侧子元素则可以设置固定宽度或较小的`flex-grow`值。 五、CSS Grid布局 CSS Grid布局是另一种强大的布局工具，特别适合创建复杂的...
在本场景中，`div`被用作构建布局的基本单元，可以分别定义左侧固定宽度的区域和右侧自适应宽度的区域。 2. **宽度设置**: 在CSS中，我们可以使用`width`属性来设置元素的宽度。对于自适应布局，右侧的`div`通常不...
在探讨“根据图片大小自适应的CSS”这一主题时，我们深入分析了如何利用CSS（层叠样式表）来确保图片能够根据不同设备和屏幕尺寸自动调整其大小，从而实现响应式设计的效果。以下是对该主题的详细解析： ### 一、...
通过设置不同的样式规则，根据设备的特性（如宽度、高度、分辨率等）来应用相应的样式，使页面能够自动调整布局。 接下来，我们关注CSS3中的Flexbox（弹性盒模型）。Flexbox允许开发者创建灵活、响应式的布局，特别...
例如，如果一个元素在一个固定宽度布局中占880像素宽，那么在流动布局中，这个宽度应该被设置为页面宽度的百分比。通过合理的数学计算，设计师可以得到一个合适的百分比值，然后根据不同的屏幕分辨率调整这个值，以...
自适应列宽度可以使表格在不同设备和屏幕分辨率下保持清晰易读，提高用户的浏览体验。 JqGrid自适应列宽度的实现主要依赖于以下几点： 1. **Grid宽度设置**：JqGrid允许设置全局网格宽度（例如，`width`属性），这...
2. 流式布局：传统的固定宽度布局在多分辨率设备上往往无法自适应。流式布局采用百分比单位，而不是像素，使得元素可以随着浏览器窗口的大小变化而自动调整。例如，我们可以使用Flexbox或Grid布局来创建灵活的容器，...
标题中的“自适应各种终端各分辨率的CSS+XHTML”是指使用CSS（层叠样式表）和XHTML（可扩展超文本标记语言）技术来创建一个网页设计，该设计能够根据用户使用的设备和屏幕分辨率自动调整布局，确保在手机、平板电脑...
总结以上，CSS实现自适应宽度的菜单按钮效果代码不仅涉及到基础的CSS知识，还融入了现代网页设计中常用的布局技术、视觉效果以及兼容性处理方法。这些技术的结合，使得菜单按钮不仅功能上能够适应多种屏幕和浏览器...
本篇将详细讲解如何使用CSS来实现宽度和高度的自适应100%效果，以满足不同屏幕尺寸和设备的需求。 1. **宽度自适应100%** 宽度自适应100%通常用于让元素占据其父容器的全部宽度，从而在不同分辨率和屏幕尺寸下保持...
REM布局是一种在Web开发中广泛使用的响应式设计技术，它能够帮助开发者实现页面在不同分辨率的移动设备上自适应显示，确保用户界面在各种屏幕尺寸下都能保持良好的可读性和视觉一致性。REM（Root Em）是以根元素...
RDLC报表自适应主要是指报表在不同设备或屏幕尺寸下能够自动调整其布局，以适应显示环境。这在移动设备和多屏幕分辨率的现代应用场景中尤为重要。RDLC报表自适应主要涉及到以下几个关键概念和方法： 1. **布局设计*...
本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上正常显示其定位位置。 首先，我们需要了解常见电脑的分辨率。笔记本电脑通常具有1366*768的分辨率，而台式机则可能为1920*1080或更高。不同分辨率...
确保这些图片在不同分辨率和屏幕尺寸下都能正确显示，可以使用响应式图片技术，如`srcset`属性或CSS背景图像的`background-size`属性。 5. 文档引用：`www.workcss.com.txt`可能是一个链接到CSS框架或库的文档，...
这个"CSS自适应宽度的按钮导航代码.zip"压缩包包含了一个实现这一功能的示例项目，我们可以从中学到一些关键的IT知识点。 首先，我们来看HTML5的运用。`index.html`文件是整个页面的结构基础，其中可能包含了`<nav>...
这种方法利用了`<table>`元素的`width`属性的像素值设定，以确保网页在不同分辨率下保持相同的宽度，从而避免因分辨率变化导致的布局变形。具体操作是在`1024x768`分辨率下，创建固定宽度（例如`960px`）并设置`...