原文:
http://my.oschina.net/meng527/blog/487004
关于HTML，css3自适应屏幕，自适应宽度 http://my.oschina.net/u/1455583/blog/493802
1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我 们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度 不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于 1200px时候显示宽度为900px。
.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排错将导致判断失效。
<!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]-->
5.完美兼容
<!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`通常不...
REM布局是一种在Web开发中广泛使用的响应式设计技术，它能够帮助开发者实现页面在不同分辨率的移动设备上自适应显示，确保用户界面在各种屏幕尺寸下都能保持良好的可读性和视觉一致性。REM（Root Em）是以根元素...
在探讨“根据图片大小自适应的CSS”这一主题时，我们深入分析了如何利用CSS（层叠样式表）来确保图片能够根据不同设备和屏幕尺寸自动调整其大小，从而实现响应式设计的效果。以下是对该主题的详细解析： ### 一、...
通过设置不同的样式规则，根据设备的特性（如宽度、高度、分辨率等）来应用相应的样式，使页面能够自动调整布局。 接下来，我们关注CSS3中的Flexbox（弹性盒模型）。Flexbox允许开发者创建灵活、响应式的布局，特别...
例如，如果一个元素在一个固定宽度布局中占880像素宽，那么在流动布局中，这个宽度应该被设置为页面宽度的百分比。通过合理的数学计算，设计师可以得到一个合适的百分比值，然后根据不同的屏幕分辨率调整这个值，以...
自适应列宽度可以使表格在不同设备和屏幕分辨率下保持清晰易读，提高用户的浏览体验。 JqGrid自适应列宽度的实现主要依赖于以下几点： 1. **Grid宽度设置**：JqGrid允许设置全局网格宽度（例如，`width`属性），这...
本篇将详细讲解如何使用CSS来实现宽度和高度的自适应100%效果，以满足不同屏幕尺寸和设备的需求。 1. **宽度自适应100%** 宽度自适应100%通常用于让元素占据其父容器的全部宽度，从而在不同分辨率和屏幕尺寸下保持...
2. 流式布局：传统的固定宽度布局在多分辨率设备上往往无法自适应。流式布局采用百分比单位，而不是像素，使得元素可以随着浏览器窗口的大小变化而自动调整。例如，我们可以使用Flexbox或Grid布局来创建灵活的容器，...
标题中的“自适应各种终端各分辨率的CSS+XHTML”是指使用CSS（层叠样式表）和XHTML（可扩展超文本标记语言）技术来创建一个网页设计，该设计能够根据用户使用的设备和屏幕分辨率自动调整布局，确保在手机、平板电脑...
总结以上，CSS实现自适应宽度的菜单按钮效果代码不仅涉及到基础的CSS知识，还融入了现代网页设计中常用的布局技术、视觉效果以及兼容性处理方法。这些技术的结合，使得菜单按钮不仅功能上能够适应多种屏幕和浏览器...
在现代网页设计领域，自适应CSS布局成为了一种趋势，旨在确保网页在不同设备和屏幕尺寸上都能呈现出最佳的视觉效果和用户体验。流动布局，作为自适应布局的一种形式，凭借其灵活性和响应式特性，成为了设计师们的...
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`）并设置`...