[武汉|荣耀师兄]JS-叶紫阳|2017年04月06日的日报-技能树.IT修真院

发表于： 2017-04-06 18:24:26

1 1536

【CSS-TASK13】小课堂【武汉第124期】

移动端有哪些常见的布局方式？

1.背景介绍

随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上，也要展示在移动设备上，而移动设备种类繁多，一般的电脑端的页面布局在手机上无法完全适应，所以在手机端上我们要重新布局。

2.知识剖析

固定布局

传统经典定宽高布局，定死宽高，PC上常见布局方式，相对来说也是最基础的布局模式
有固定的版型大小，例如1200px，然后设置margin：0 auto；来居中，针对低分辨率出现内容挤出body，出现空白的情况，可使用媒体查询给body设置等于版型宽度来避免。

.wrap{
    width: 640px;
    overflow: hidden;
    margin: 0 auto;
}

多列布局

column-count是css3的一个属性，主要用于文本元素，支持响应式。
column-count属性指定某个元素应分为的列数。
column-width属性指定列的宽度。

.wrap{
    overflow: hidden;
    margin: 0 auto;
    column-count: 6; 
    column-width: 200px;
}

BOOTSTRAP布局

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。
bootstrap的栅格是基于百分比的，在使用的时候，我们给相应的div设置col-sm-4, col-md-6,col-lg-12。

<p class="c1 col-lg-2 col-md-3 col-sm-4 col-xs-6">

媒体查询+REM布局

使用媒体查询可以根据不同的设备宽度加载不同的css样式
rem是一个相对单位，会根据根节点的字体大小来计算的
使用媒体查询和rem可以实现移动端的响应式。

html{font-size: 20px;}
@media screen and (max-width: 820px) {
    html {
        font-size: 16px;
    }
}
@media screen and (max-width: 650px) {
    html {
        font-size: 14px;
    }
}
@media screen and (max-width: 550px) {
    html {
        font-size: 10px;
    }
}

百分比布局

百分比大小+最大最小宽度实现自适应。高度用内容撑开，宽度使用百分比，同时给div设置一个最大最小宽度

p{
    box-sizing: border-box;
    padding: 10px;
    float: left;
    width: 16.66%;
    max-width: 200px;
    min-width: 150px;
    min-height: 350px;
}

Flex布局

flex也称为弹性布局，他会根据页面的剩余宽度自动分配空间。

.grid{
   display: flex;
   height: 200px;
   width: 600px;
}
.box1{
   
   flex: 1;
   width: 1%;
   background-color: #2196f3;
}
.box2{
   /*padding: 0 50px;*/
   flex: 1;
   width: 1%;
   background-color: #1de9b6;
}