移动web(flex布局)

一.移动端特点:

• 移动端和PC网页不同点:

          PC端:1.屏幕大,页面固定版心.

                    2.PC端浏览器多,兼容问题多(布局:浮动+定位+标准流)

         移动端: 1.手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度

                       2.移动端不需要考虑兼容问题,可以放心使用CSS

• 分辨率:

          1. 屏幕尺寸:屏幕的对角线,一般用英寸来衡量

          2.物理分辨率越大,显示的图片越清晰.  

          3.1逻辑分辨率=1物理分辨率   

          4.一般以iphone7/8/9作为参考,375逻辑分辨率

• 二倍图:

           先把设计图缩小一半,改成375px来写代码

• 视口(可视的屏幕区域):

1.  布局视口:出厂默认设置980px,浏览显示页面内容的屏幕区域
2. 视觉视口:用户能看到的网站区域,注意:网站的区域,可以缩放操作视觉视口,不会影响布局视口,布局视口依然保持原来的宽度.
3. 理想视口:屏幕有多宽,我的设备有多宽.

二.百分比布局:

• 百分比布局:也叫流式布局.
• 效果:宽度自适应,高度固定.

.box{
      width: 500px;
      height: 50px;
      background-color: pink;
        }
        .box div{
            float: left;
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .box div:nth-child(2n-1){
            background-color: royalblue;
        }

     

---

 三.flex布局:

• Flex布局/弹性布局:

           作用:避免浮动布局中脱离标准流现象发生.

           设置方式:给父元素添加display:flex,子元素可以自动的挤压或拉伸.

           组成部分:弹性容器,弹性盒子,主轴,侧轴/交叉轴

 display: flex;
 justify-content: space-between;

---

• 主轴对齐方式:

1. 修改主轴对齐方式:justify-content:()
2. justify:每行排列方式
3. 修改主轴对齐方式

  display: flex;
            /* 默认起点排列 */
            justify-content: start;
            /* 终点开始排列 */
            justify-content: flex-end;
            /* 居中排列 */
            justify-content: center;
            /* 1:2排列 */
            justify-content: space-around;
            /* 1:1排列 */
            justify-content: space-evenly;

---

•  侧轴对齐方式:

1. 修改对齐方式属性:

                                         align-items(添加到弹性容器-父级)

                                         align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子-子级)

//可以让盒子垂直居中
align-items: center;

2. 通过flex让一个子盒子水平和垂直居中

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

---

• 伸缩比: 

                把父盒子分为若干份数，每个子盒子各占几份。

/*  flex:1; 一定给子盒子加

分配父级剩余的空间   */
flex: 1;

 比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。

/*
1. 一定要给子盒子添加。
2. 子盒子默认高度会和父盒子一样高。（前提是不给高度）*/
.father {
    display: flex;
    height: 300px;
    background-color: pink;
}

.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

显示效果:

---

• 圣杯布局 :

          1.所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

           2.一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

/*    中间flex: 1;     和 width 有冲突。  **优先**执行 flex：1；*/
.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

---

• 总结: 

1. 在flex中,标签不分类.
2. 没有块级元素,行内块元素,行内元素之说,都可以直接设置宽和高.
3. flex不存在脱标,更不用清除浮动,基本淘汰浮动.
4. 存在一些兼容问题,如果不考虑兼容性可以大量使用,移动端直接使用flex布局.
5. <https://caniuse.com/>  可以查看兼容性