常用一屏自适应布局

Posted jiuxin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常用一屏自适应布局相关的知识,希望对你有一定的参考价值。

   

     在web开发的时候,有时候会遇见一些自适应布局,而且是一屏内自适应,特别是写一些后台管理系统界面,都是一屏显示,而且显示内容布局有固定的,也有不固定的,如果用css3的弹性盒子来解决的话,当然会很容易,但是呢,css3的弹性盒子在PC端的支持并不是那么的好,尤其是万恶的IE浏览器(做web开发的都懂)。同时,使用后台管理系统的计算机浏览器版本一般情况下都不会很高,这时候更要考虑浏览器的兼容问题了。不多说,直接上代码。

1、自适应左右两栏(左边宽度固定,右边宽度自适应)

 1  <style>
 2         *{margin: 0;padding: 0;}
 3         html,body{width: 100%;height: 100%}
 4         .left{width:100px;height:100%;float: left;background: #f00;}
 5         .right{height: 100%;background: #0f0;overflow: hidden;}
 6     </style>
 7 </head>
 8 <body>
 9     <div class="left"></div>
10     <div class="right"></div>
11 </body>
12 </html>
13  
14 /*利用BFC的原理解决,但是此处只能写overflow,属性不为visible*/

技术分享图片

2、自适应上下两栏布局(上边高度,下边内容自适应)

 1 <style>
 2         /* *{margin: 0;padding: 0;}
 3         html,body,.wrap{width: 100%;height: 100%;}
 4         .wrap{position: relative;}
 5         .top{height: 100px;width: 100%;background: #f00;}
 6         .bottom{width: 100%;position: absolute;top: 100px;bottom: 0;background: #0f0;} */
 7         *{margin: 0;padding: 0;}
 8         html,body,.wrap{width: 100%;height: 100%;}
 9         .wrap{padding-top: 100px;box-sizing: border-box;position: relative;}
10         .top{height: 100px;width: 100%;background: #f00;position: absolute;top: 0;}
11         .bottom{width: 100%;height: 100%;background: #0f0;}
12     </style>
13 </head>
14 <body>
15     <div class="wrap">
16         <div class="top"></div>
17         <div class="bottom"></div>
18     </div>
19 </body>
20 </html>
21 /*此处写了两种方法,第一种利用定位的原理,将下边的盒子高度拉伸到适应剩下的屏幕。第二种修改盒模型的解析规则,利用padding将下边盒子向下推移上边盒子的高度,刚好适应整个屏幕。*/

 

技术分享图片

3、上下(左右)三栏布局(上边高度固定,左边宽度固定,右边内容区自适应)

 1 <style>
 2             *{margin: 0;padding: 0;}
 3             html,body,.wrap{width: 100%;height: 100%;}
 4             .wrap{position: relative;}
 5             .top{height: 100px;width: 100%;background: #f00;}
 6             .main{width: 100%;position: absolute;top: 100px;bottom: 0;}
 7             .left{height: 100%;width: 100px;float: left;background: #00f;}
 8             .right{height: 100%;overflow: hidden;background: #ff0;}
 9  
10     </style>
11 </head>
12 <body>
13     <div class="wrap">
14         <div class="top"></div>
15         <div class="main">
16             <div class="left"></div>
17             <div class="right"></div>
18         </div>
19     </div>
20 </body>
21 </html>
22 /*先上下两栏布局,然后在下边的盒子里自由两栏布局*/

技术分享图片

4、左中右三栏布局(左右两边固定,中间自适应)

 <style>
        *{margin: 0;padding: 0}
        html,body,.wrap{width:100%;height: 100%;}
        .left{width: 100px;height: 100%;float: left;background: #f00;}
        .right{width:100px;height: 100%;float:right;background: #f00;}
        .center{height: 100%;overflow: hidden;background: #0f0;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>
/*根据HTML页面自上而下的解析规则,在页面结构上,将右边的盒子放在中间盒子的上边,先将左右两边的盒子固定好,然后剩下的空间,中间的盒子去自适应占满。如果中间的盒子不放在最后边,那么将不能实现这种效果,页面解析到中间盒子的时候,就自动将左边盒子的右边剩余的空间占满,然后右边的盒子就在第二屏出现。*/

技术分享图片

 

5、上下(左中右)四栏布局(上边盒子高度固定,左右两边盒子宽度固定)

 <style>
      *{margin: 0;padding: 0;}  
      html,body,.wrap{width: 100%;height: 100%;}
      .top{width: 100%;height: 100px;background: #f00;}
      .main{width: 100%;position: absolute;top: 100px;bottom: 0px;}
      .left{width: 100px;height: 100%;float: left;background: #00f;}
      .right{width: 100px;height: 100%;float: right;background: #00f;}
      .center{height: 100%;overflow: hidden;background: #0f0;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top"></div>
        <div class="main">
            <div class="left"></div>
            <divb class="right"></divb>
            <div class="center"></div>
        </div>
    </div>
</body>
</html>
/*先将屏幕分为上下两栏,然后将下边的盒子分为左中右三栏*/

技术分享图片

6、上左中右下五栏布局(中间区域自适应)

<style>
        *{margin: 0;padding: 0;}
        html,body,.wrap{width:100%;height: 100%;}
        .wrap{position: relative;}
        .top{height: 100px;width: 100%;background: #f00;}
        .main{width: 100%;position: absolute;top: 100px;bottom: 100px;}
        .bottom{width: 100%;height: 100px;position: absolute;bottom: 0;background: #00f;}
        .left{width:100px;height: 100%;float: left;background: #ff0;}
        .right{width: 100px; height: 100%;float: right;background: #0ff;}
        .center{height: 100%;overflow: hidden;background: #0f0;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top"></div>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </div>
        <div class="bottom"></div>
    </div>
</body>
</html>
/*先写上中下三栏布局,然后写左中右三栏*/

技术分享图片

 

以上是关于常用一屏自适应布局的主要内容,如果未能解决你的问题,请参考以下文章

html5 canvas首屏自适应背景动画循环效果怎么插入

h5 宽度全屏自适应

背景图片居中全屏自适应显示

Egret之手机异形屏自适应(微信)

解决:WebView高度自适应,视频全屏后,页面留白问题

片段设计:通过在单个 Activity 中显示/隐藏片段来适应多种屏幕布局?