首页 > 代码库 > 自适应相关知识点1
自适应相关知识点1
1—百分比
百分比是相对于父元素的。利用百分比可以将浏览器尺寸和元素尺寸联系起来,从而实现自适应。
2—auto
auto为由浏览器自动计算。块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于width。使用auto属性在父元素宽度变化时,该元素的宽度也会随着变化。当该元素设置为浮动时,width就成了内容的宽度了,由内容撑开,即有了包裹性。overflow|position:absolute| float:left/right、替换元素;都会产生包裹性。在具有包裹性的元素上width:auto;是不能实现让元素自适应浏览器宽的。
3--移动端rem实现自适应
http://caibaojian.com/rem-responsive-2.html
http://caibaojian.com/web-app-rem.html
自适应:在不同分辨率不同设备上显示的效果一样
待研究。。。。
4—margin负值法
等一下我。。。。。。
5—浮动
等一下我。。。。。。
eg.
<style type="text/css">
.main{
width:100%;
background-color: bisque;
}
.clearfix:after{
content:"";
clear:both;
display:block;
height:0;
}
.left{
width:200px;
background-color: #056FD3;
height:100px;
float:left;
}
.right{
width:200px;
background-color: #74DEF8;
height:100px;
float:right;
}
.center{
height:100px;
background-color: blueviolet;
}
.footer{
width:100%;
height:300px;
background-color: gold;
}
</style>
<div class="main clearfix">
<div class="left">assa</div>
<div class="right">asx</div>
<div class="center">qsa</div>
</div>
<div class="footer">addf</div>
参考:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.cnblogs.com/qieguo/p/5421252.html
http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/
未完待续=>
自适应相关知识点1