移动端到底该如何布局?

  

一.PC端与移动端区别

1.页面布局

pc端:版心 标准流 浮动 定位

移动端:宽度=设备宽 flex布局(推荐)或者百分比布局

2.分辨率

在pc端 1物理分辨率=1逻辑分辨率

在移动端 1物理分辨率=2逻辑分辨率(推荐) or 1:3 or:1:1

二.移动端视口

1.视口(设备可视窗口):

1.1布局视口 默认是980px

1.2可视视口 眼睛可以看到的区域

1.3理想视口 设备宽度=网页的宽度

2.视口标签 适配(理想视口)

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

三.移动端二倍图

设计师给你图片是二倍图, (750px宽 写的时候375px 940px宽 写的时候宽470px)

四.flex布局

flex布局是由:弹性容器父亲+弹性盒子儿子+主轴+侧轴组成

主轴 :

justify-content: space-between; 2边靠边对齐

center 水平居中

代码展示:

    .box{
            width: 1000px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* display: flex把父元素设置为弹性容器 */
            display: flex;
            /* 主轴对齐方式 */
            /* 从左到右主轴排序 */
            /* justify-content: flex-start; */
            /* 从右往左主轴排序 */
            /* justify-content: flex-end; */
            /* 主轴居中 */
            /* justify-content: center; */
            /* 盒子平均分,中间距离比例是2比1 */
            /* justify-content: space-around; */
            /* 两边靠边,中间自适应 */
            justify-content: space-between;
            /* 盒子平均分,中间距离比例是1比1 */
            /* justify-content: space-evenly; */
        }
        /* 是给父元素加来控制子元素 */
        /* 弹性盒子 */
        .box div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

侧轴:

align-items: center;垂直居中对齐

代码展示

.box{
            width: 800px;
            height: 800px;
            background-color: aqua;
            /* 弹性容器 */
            display: flex;
            /* 侧轴对齐方式 */
            /* 从垂直起点开始排序 */
            /* align-items: flex-start; */
            /* 反方向排序 */
            /* align-items: flex-end; */
            /* 侧轴居中 */
            align-items:center;
            /* 默认值拉伸,高度和父元素一样 */
            /* align-items: stretch; */
        }
        .box div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

单个弹性盒子元素设置:

align-self:取值=侧轴取值

代码展示:

        /* align-self是控制单个盒子的侧轴排列方式 */
        .box div:nth-child(2){
            align-self: center;
        }
        .box div:nth-child(3){
            align-self: flex-end;
        }

五.缩放比

圣杯布局 2边固定,中间自适应 flex:1; 子元素的等份是父元素的等份

代码展示:

   .box{
            /* 圣杯布局不能固定大盒子的宽度 */
            width: 100%;
            height: 50px;
            background-color: pink;
            display: flex;
            /* 最小宽度,浏览器拉伸的最小值 */
            min-width: 500px;
        }
        /* 把两边的盒子设固定宽高,浏览器伸缩的时候不会变形 */
        .box .left,
        .box .right{
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
        /* 圣杯布局,中间自适应,等份为1,平分父容器的剩余宽度,浏览器伸缩的时候自适应宽度 */
        .box .center{
            flex: 1;
            background-color: blue;
        }