自适应布局时div宽度为width:，如果内容超过div自适应的最大值，在IE6div会被撑大。怎么解决这个bug?
HTML例子：&div id="A" style="overflow: width:800"&
&div id="B" style="width:200 float:"&&/div&
&div id="C" style="margin-left:200"&
&div id="D" style="1000"&我的宽度超过父元素的宽度，但不想把父元素的宽度撑大。&/div&
&/div&&/div&正常情况下，C元素的宽度是600px。但在IE，C元素被D元素撑大，变成了1000px。C元素不能设置宽度，有什么办法使C元素不被撑大吗？
&!DOCTYPE html&
&title&aaa&/title&
&div id="A" style="width:800height:600background:#"&
&div id="B" style="width:200 height:400float:background:#"&2&/div&
&div id="C" style="margin-left:200height:400background:#999;;position:"&
&div id="D" style="width:1000background:#666;position:"&没有撑宽父元素&/div&
IE6下的效果：运用@media实现网页自适应中的几个关键分辨率 - 今天又进步了 - 博客园
随笔 - 317, 文章 - 1, 评论 - 4, 引用 - 0
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？
先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是
768、992、1200。当然了过去也有 些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是&=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)这边表示&=767就不会有冲突了
从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media (min-width: 768px){ //&=768的设备 }
@media (min-width: 992px){ //&=992的设备 }
@media (min-width: 1200){ //&=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //&=1200的设备 }
@media (min-width: 992px){ //&=992的设备 }
@media (min-width: 768px){ //&=768的设备 }
因为如果是1440,由于那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //&=1199的设备 }
@media (max-width: 991px){ //&=991的设备 }
@media (max-width: 767px){ //&=768的设备 }
经过了上面的入门学习，我们就可以灵活的来点高级的混合应用了
@media screen and (min-width:1200px){ #page{ width: 1100 }#content,.div1{width: 730}#secondary{width:310px} }&
&@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960 }#content,.div1{width: 650}#secondary{width:250px}select{max-width:200px} }
&@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900 }#content,.div1{width: 620}#secondary{width:220px}select{max-width:180px} }
&@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450 }#content,.div1{width: 420position: }#secondary{display:none}#access{width: 450 }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} }&
@media only screen and (max-width: 479px) { #page{ width: 300 }#content,.div1{width: 300}#secondary{display:none}#access{width: 330} #access a {padding-right:10padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }
上面的代码中用到了 screen这里指定了显示器为显示设备，也可以是print打印机等其他设备，一般我们用screen。或者干脆省略。如果想看详细的关于media的说明可以百度一下关于media query的知识引入时间维度和空间维度,让信息流向它该去的地方!绽放你的思想。。。
随笔- 439&
评论- 205&
问题一，分辨率Resolution适配：不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。
问题二，单位英寸像素数PPI适配：使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。
问题三，设备像素比例DPR适配：1物理像素在&meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale
参考：http://www./article/2402/web-app-rem.html
/amfe/lib.flexible
demo如下：
&!doctype html&
&meta charset="UTF-8" /&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&title&移动h5自适应布局&/title&
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem;/*实际相当于14px*/}
padding:0;
font-size:<span style="background-color: #f5f5f5; color: #rem;
width:3rem;
height:3rem;
border:1px solid #000;
box-sizing:border-box;
margin-top:<span style="background-color: #f5f5f5; color: #rem;
width:2rem;
height:2rem;
border:1px solid #000;
box-sizing:border-box;
width:<span style="background-color: #f5f5f5; color: #rem;
&div class="div2"&动态更改html元素大小&/div&
&div class="div3"&&/div&
&div class="div4"&&/div&
&img class="img1" src="/img/bdlogo.png" alt="" /&
// 该代码来自/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelR
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio &= 3 && (!dpr || dpr &= 3)) {
} else if (devicePixelRatio &= 2 && (!dpr || dpr &= 2)){
// 其他设备下，仍旧使用1倍的方案
scale = 1 /
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
})(document, window);
阅读(...) 评论()[经典]利用@media screen实现网页布局的自适应 | 小蝴蝶
&&&&【提要】综合文库信息 : 《[经典]利用@media screen实现网页布局的自适应 | 小蝴蝶》由66test综合文库频道友情收集整理，来源于网络，仅供参考：
&&&&经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,&&&&优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小&&&&只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值&&&&以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验&&&&@media screen and (min-width:1200px){ #page{ width: 1100 }#content,.div1{width: 730}#secondary{width:310px}}@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960 }#content,.div1{width: 650}#secondary{width:250px}select{max-width:200px}}@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900 }#content,.div1{width: 620}#secondary{width:220px}select{max-width:180px}}@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450 }#content,.div1{width: 420position: }#secondary{display:none}#access{width: 450 }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}}@media only screen and (max-width: 479px) { #page{ width: 300 }#content,.div1{width: 300}#secondary{display:none}#access{width: 330} #access a {padding-right:10padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}}&&&&效果如下&&&&1280以上分辨率下&&&&1100分辨率下&&&&880分辨率下&&&&720分辨率下&&&&440分辨率下&&&&【66提示】如页面失效，请百度标题查看相关内容……
特别声明：CSS布局奇淫技巧之-高度自适应 - 无双 - 博客园
何为高度自适应？
高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。
在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的，但这一法则在IE6中并不适用，因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸，这正是我们要利用的地方。
在IE7+ 和 W3C浏览器中的方案
看下代码：
再看下效果：
在IE6中的方案
好吧，不想再对IE6吐槽，只想尽快搞定它。
在IE6中的思路是，把html和body元素的高度设定为100%，即浏览器窗口的高度，然后利用padding-top在html元素上挤出一点空间来，因为绝对定位的最高参照物是参照html元素的，所以可以把顶栏绝对定位在html的padding-top那块空间上。这时body的高度就是html的高度（也是浏览器窗口的高度）减去html的padding-top的值，这也是ie6非常奇怪的一个特性，因为按照w3c盒模型来讲，增加了html元素的padding-top,则html元素的高度也会相应增加，这时浏览器窗口应该会出现垂直滚动条了。但IE6不会，html的增加了padding-top后，整个html元素的高度还是保持不变，即浏览器窗口的高度，变化的是body的高度减小了，用来抵消html的padding-top.
还是先看看代码吧：
再看下效果：
最终的兼容代码
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&高度自适应布局&/title&
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100}/*for ie6*/
.top{ background:#36C; height:100}
* html .top{ background:#36C; height:100 position: top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position: width:100%; top:100 bottom:0; overflow:}
* html .main{ background:#F90; position: height:100%;}/*for ie6*/
&div class=&top&&我是top，固定高度&/div&
&div class=&main&&我是main，高度随浏览器大小变化而变化&p style=&height:500&&&/p&&/div&
这种方法也适用于顶栏与底栏高度固定，中间那栏高度自适应的三栏布局}