目录

01  移动端的概述

02 移动端的视口标签

03  开发中的二倍图

04 流式布局

05  弹性盒子布局

---

01  移动端的概述

        移动端包括:手机 平板  便携式设备

        目前主流的移动端开发:

                安卓设备

                IOS设备

        只要移动端支持浏览器  那么就可以使用浏览器开发移动端项目

        开发移动端  使用html+css+js

        在移动端  让同一个网页在不同设备适配 要充分利用屏幕空间

        宽度自适应:

                流式布局  百分比布局 伸缩布局

        单位: rem

        一套代码 跨设备运行

        web前端开发移动端的技术/框架

                1.html+css+js

                2.vue.js

                3.微信小程序

                4.uniapp

                5.react

                6.angular

02 移动端的视口标签

        视口:(viewport)

                在移动端网页布局不是基于浏览器可视区域的宽度

                而是基于一个虚拟的布局区域  这就是视口 视口一般宽度默认是980

        现在是移动互联网时代 要能写出基于手机屏幕宽度的网页

        在移动端开发之前 先把视口设置为当前屏幕的宽度

        content的值:

                width=device-width  宽度设置为当前设备的宽度

                user-scalable=no  控制用户是否能够缩放当前页面 no表示不能

                initial-scale=1.0  初始化缩放比例

                maximum-scale=1.0 最大缩放比例

                minimum-scale=1.0 最小缩放比例

                多个值用逗号隔开

        开发移动端页面 必须设置视口标签

        

03  开发中的二倍图

        

04 流式布局

        针对移动端开发的布局方案:

                1.流式布局  百分比布局

                2.flex弹性盒子布局

                3.rem单位+媒体查询

                4.混合布局

        流式布局比较重要的就是css属性:

                当前元素宽高百分比是按照父元素去计算的

                但是在父元素宽高变化的时候需要规定变化的范围

                max-width  min-width

                max-height  min-height

05  弹性盒子布局

        父元素叫做容器 子元素叫做项目

        容器的六大属性:

                flex-direction :  (项目在容器中的排列方式)

                        row(默认值 ) 横向排列

                        row-reverse 横向反转排列

                        column 纵向排列

                        column-reverse 纵向翻转排列

                flex-wrap : (如果在一根轴线下 放不下 元素是否换行)

                        nowrap  (默认值) 不换行

                        wrap  一行放不下就换行

                        wrap-reverse  反转换行

                flex-flow : (是flex-direction 和flex-wrap 的连写)

                        flex-flow: row nowrap

                justify-content : (定义项目在主轴(横向)上面的对齐方式)

                        flex-start(默认值) 主轴开始位置(一般是左侧)

                        flex-end 主轴结束位置(一般是右侧)

                        center   主轴中间位置

                        space-between  两端对齐  中间间隔一样

                        space-around  项目两端间距相等   相邻项目间隔两倍

                align-items :  (规定了项目在交叉轴上面的对齐方式)

                        flex-start 交叉轴顶部对齐

                        flex-end  交叉轴底部对齐

                        center   交叉轴中间对齐

                        baseline  项目和项目之间 文本基线对齐

                        stretch (默认值)  项目如果没有设置高度 则高度占满容器

                align-content : (项目如果有多根轴线  那么多根轴线的对齐方式)

                        flex-start   与交叉轴起点对齐

                        flex-end  与交叉轴底部对齐

                        center  交叉轴居中位置

                        space-between  上线两端对齐  中间间隔相等

                        space-around 轴线与轴线之间的间隔相等 相邻轴线之间的间隔是两端间隔的两倍 

                        stretch (默认值)  元素未设置高度 高度占满当前轴线 

        项目的六大属性:

                order : 当前项目排列优先级  默认值 值越小排列越靠前

                flex-grow : 当前轴线有剩余空间时 项目的放大比例 默认是0 不放大

                                  按照每个项目定义的数值进行分配 0为不分配

                flex-shrink 不能换行

                        如果当前轴线剩余的空间不足以满足每个项目的宽度或者高度

                        那么 默认的缩小比例 默认值是1 大家同比例缩

                flex-basis:

                        如果有剩余空间优先分配 basis的固定值

                        然后再分配设置 flex-grow 比例值  默认值auto

                flex : grow shrink  basis 连写

                align-self : auto | flex-start | flex-end | center | baseline | stretch;

                        用来覆盖父容器设置的algin-items属性   单独给当前项目设置交叉轴对齐方式

                    auto 是默认值 表示按照父容器设置的algin-item生效  其他值和父容器的值效果一样