移动web-移动端特点、百分比布局、flex布局/弹性布局及伸缩比

目录

        移动端特点

        百分比布局

        flex布局/弹性布局(重点)

        伸缩比

移动端的特点

        1 PC端网页和移动端网页的不同点

            PC屏幕大，网页固定版心

            手机屏幕小， 网页宽度多数为100%

        2 如何在电脑里面边写代码边调试移动端网页效果？

            谷歌模拟器

        3 分辨率

            3.1 屏幕尺寸 指的是屏幕对角线的长度，一般用英寸来度量

            3.2 移动端主流设备分辨率

                PC分辨率

                    1920 * 1080

                    1366 * 768

                    ……

                缩放150%

                    （1920/150%）*（1080/150%）

            3.3 分辨率分类

                物理像素点：

                a 物理分辨率：指的是屏幕所拥有的物理像素点的个数。它在生产屏幕时就固定的，是不可被改变的。

                b 逻辑分辨率：指的是设备或视口的宽高，单位为px。网页设计图就是根据逻辑分辨率而设计的。由软件（驱动）决定的

                总结

                    a 硬件分辨率（出厂设置）

                    b 缩放调节的分辨率（软件设置）

                    c 网页设计根据逻辑分辨率而定

        4 视口

            视口：显示HTML网页的区域，用来约束HTML尺寸。

            使用场景：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            viewport：视口

                width=device-width 视口宽度 = 设备宽度

                initial-scale=1.0 缩放1倍（不缩放）

                maximum-scale=1.0 最大缩放比为1

                minimum-scale=1.0 最小缩放比为1

                user-scalable=no  禁止用户缩放

            注意：默认情况下，网页的宽度和逻辑分辨率不同，移动端默认网页宽度是980px。

        5 二倍图

            使用场景：图片分辨率, 为了高分辨率下图片不会模糊失真

            现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

            二倍图设计稿尺寸：750px

    百分比布局，也叫流式布局

        效果： 宽度自适应，高度固定。

    flex布局/弹性布局(重点)：

        1 Flex布局模型构成

            组成部分:

                弹性容器

                    默认宽度为父元素的宽度，高度由内容撑开

                弹性盒子（弹性容器的亲儿子才是弹性盒子）

                    1 宽度由内容所撑开高度和父元素一样高（侧轴方向默认是拉伸的）

                    2 默认一行显示并且可以直接设置宽高，没有块、行内块、行内元素之分，统统为弹性盒子

                    3 弹性盒子默认不换行

                主轴

                侧轴 / 交叉轴

            特点：

                1 是一种浏览器提倡的布局模型

                2 布局网页更简单、灵活

                3 避免浮动脱标的问题

            作用

                1 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

                2 Flex布局非常适合结构化布局

            设置方式

                父元素添加 display: flex，子元素可以自动的挤压或拉伸

        2 主轴对齐方式

            在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

            修改主轴对齐方式属性: justify-content（添加到弹性容器）

            属性值：

                  属性值                              作用

                flex-start                   默认值, 起点开始依次排列

                flex-end                    终点开始依次排列

                center                      沿主轴居中排列

                space-around          弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧

                space-between       弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

                space-evenly          弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

        3 侧轴对齐方式

            修改侧轴对齐方式属性:

                1 align-items（添加到弹性容器）

                2 align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

                属性值  

                      属性值              作用

                    flex-start      默认值, 起点开始依次排列

                    flex-end        终点开始依次排列

                    center          沿侧轴居中排列

                    stretch         默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

    伸缩比

        属性

            flex : 数值(整数);

        注意 : 只占用父盒子剩余尺寸