css布局宽度自适应

随着各种终端的不断涌现，网页中的元素适应不同的分辨率变得特别重要，根据经验，涉及到宽度自适应的一共有四种情况：

左端固定，右边自适应；右端固定，左边自适应；两端固定，中间自适应；中间固定，两端自适应。

1.左端固定，右边自适应；

左边元素，本身是块元素，令其浮动后，空出右边区域，（个人理解浮动概念，好比水池中的一块浮木，现在水池的大小一定，左边浮动了一块木头，现在可容纳的区域就是剩余的地方，别的东西要想放进去只能在浮木的边上）所以右边元素作为块级元素，默认属性就是独自占一行，所以设置margin-left

,即可实现，右边随分辨率的变化。

<!DOCTYPE html>
<html>

<head>
    <title>左端固定</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        *{padding:0;margin:0}
        .left{float:left;}
        .right{float:right;}
        .clearfix:after { content: ".";  display: block;clear: both;height: 0;overflow: hidden;}
　　　　 .clearfix {zoom: 1;}
        .exp { width: 100%;  border-bottom: 1px solid #ccc;  border-top: 1px solid #ccc; color：#666; font-size: 16px; line-height: 22px;}
        .block {width: 100px;height: 100px;background: #f60;}
        .change { margin: 0 0 0 110px;}
    </style>
</head>

<body>
    
        <section>
            <h1>左边固定</h1>
            <div class="exp clearfix">
                <div class="block left"></div>
                <div class="change">
                    响应式布局有哪些优点和缺点? 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
                </div>
            </div>
        </section>
       
</body>

</html>

结果如图：

常见应用：商品列表的介绍，商品图片大小固定，介绍可随分辨率变化。

2.右端固定，左端自适应；

右边元素，本身是块元素，令其浮动后，空出左边区域，（木头浮动到了左边）左边元素作为块级元素，默认属性就是独自占一行，所以设置margin-right,即可实现，左边随分辨率的变化。

<!DOCTYPE html>
<html>

<head>
    <title>左端固定</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        *{padding:0;margin:0}
        .left{float:left;}
        .right{float:right;}
        .clearfix:after { content: ".";  display: block;clear: both;height: 0;overflow: hidden;}
　　　　 .clearfix {zoom: 1;}
        .exp { width: 100%;  border-bottom: 1px solid #ccc;  border-top: 1px solid #ccc; color：#666; font-size: 16px; line-height: 22px;}
        .block {width: 100px;height: 100px;background: #f60;}
        .change2 { margin: 0 110px 0 0;}
    </style>
</head>

<body>
    
        <section>
            <h1>左边固定</h1>
            <div class="exp clearfix">
                <div class="block right"></div>
                <div class="change2">
                    响应式布局有哪些优点和缺点? 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
                </div>
            </div>
        </section>
       
</body>

</html>

结果如图：

常见应用：搜索框，搜索按钮大小固定，搜索内容可随分辨率变化。

3.两端固定，中间自适应；

左右两端元素分别浮动后，空出中间区域，（木头浮动到了两边）中间元素作为块级元素，默认属性就是独自占一行，所以设置margin-left margin-right,即可实现，中间部分随分辨率的变化。

<!DOCTYPE html>
<html>

<head>
    <title>两端固定</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        *{padding:0;margin:0}
        .left{float:left;}
        .right{float:right;}
        .clearfix:after { content: ".";  display: block;clear: both;height: 0;overflow: hidden;}
　　　　 .clearfix {zoom: 1;}
        .exp { width: 100%;  border-bottom: 1px solid #ccc;  border-top: 1px solid #ccc; color：#666; font-size: 16px; line-height: 22px;}
        .block {width: 100px;height: 100px;background: #f60;}
        .change3 { margin: 0 110px;}
    </style>
</head>

<body>
    
        <section>
            <h1>两边固定</h1>
            <div class="exp clearfix">
                <div class="block right"></div>
　　　　　　　　　<div class="block left"></div>
                <div class="change3">
                    响应式布局有哪些优点和缺点? 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
                </div>
            </div>
        </section>
       
</body>

</html>

结果如图：

常见应用：三列布局中，中间内容区可变。

4.中间固定，两端自适应；

元素需要全都浮动。我是通过js得到两边的百分比来实现的，见代码。

<!DOCTYPE html>
<html>

<head>
    <title>中间固定</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        *{padding:0;margin:0}
        .left{float:left;}
        .right{float:right;}
        .clearfix:after { content: ".";  display: block;clear: both;height: 0;overflow: hidden;}
　　　　 .clearfix {zoom: 1;}
        .exp { width: 100%;  border-bottom: 1px solid #ccc;  border-top: 1px solid #ccc; color：#666; font-size: 16px; line-height: 22px;}
        .block {width: 100px;height: 100px;background: #f60;}
    </style>
</head>

<body>
    
        <section>
            <h1>两边固定</h1>
            <div class="exp clearfix">
　　　　　　　　　<div class="block left"></div>
                <div class="change4 left">
                    响应式布局有哪些优点和缺点? 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
                </div>
　　　　　　　　　　<div class="change5 left">
                    响应式布局有哪些优点和缺点? 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
                </div>
            </div>
        </section>
       <script>
        function resetPage() {
            var deviceWidth = document.documentElement.clientWidth;
            console.log(deviceWidth);
            var changeWidth = (deviceWidth - 120) / 2;
            var pecChangeWidth = changeWidth / deviceWidth * 100;
            console.log(pecChangeWidth);
            document.getElementById('change4').style.width = document.getElementById('change5').style.width = pecChangeWidth + '%';
        }
        window.onload = function () {
            resetPage();
        }
        window.onresize = function () {
            resetPage();
        }
    </script>
</body>

</html>

结果如图：

常见应用：日期填写某某-至-某某。

posted @ 2015-05-13 12:20 best仙阅读(606) 评论(0) 编辑收藏举报

刷新页面返回顶部

best仙

css布局宽度自适应

公告