<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>背景自适应</title><style type="text/css">html,body {padding: 0;margin: 0;}div {width: 100%;height: 300px;background: url('images/slide_01_640x340jpg') no-repeat;background-size: 100% 100%;}</style></head><body><div></div></body></html>
2HTML代码的截图效果：
3自适应最重要的样式如下：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
width: 100%;
background-size: 100% 100%;
4最终的效果是这样：直接float就可以了
ul, ul li{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
ul li{display:inline;float:left;width:50%;height:100px;padding:0 10px;}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
可以这么写试试看，直接设置为display:block;如果宽度是根据窗口缩放的话，可以直接设置为100%；如果定宽就写margin:0 auto;就是居中的。iframe的HTML5自适应手机
首先你要明白css的height的使用规则，当设定 height:100%; 相对高度的时候，height 具有继承性，元素的具体高度相对于它的父元素，也就是它的父元素必须有具体的height属性值，不然本元素设置的height百分比无效，等于没有设置高度。
如果元素的父元素的height属性值也是相对高度，比如是百分百，那么，父元素的父元素也必须有height设定，这种关系一直到最顶层的父元素。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）