自适应相关知识点1

最新推荐文章于 2025-03-03 09:14:15 发布

转载最新推荐文章于 2025-03-03 09:14:15 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haimengqingyuan/p/6829859.html

本文介绍了网页设计中实现自适应布局的多种方法，包括百分比布局、auto属性的应用、移动端rem单位的使用、margin负值法及浮动布局等，并提供了实例代码。

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/

未完待续=>

转载于:https://www.cnblogs.com/haimengqingyuan/p/6829859.html