快速学习掌握移动Web开发布局总结（流式布局+flex伸缩布局+rem布局+Boostrap框架 ）

由于element-ui中好多布局用到了flex，所以来学习一下flex布局和rem布局，之前跳过了，教程来自黑马pink老师。

移动端常见布局

移动端技术选型

移动端布局和以前学习的PC端有所区别

一、流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度（min-height 最小高度）

二、flex伸缩布局

1）传统布局和flex布局

2）布局原理

flex是flexible box的简写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当把父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用Flex布局的父盒子称为Flex容器（flex container），简称“容器”； 里面的所有子元素自动成为容器的成员，称为Flex项目（flex item），简称“项目”。 原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3）常见的父项属性（6个）

• flex-direction：设置主轴的方向（重点） flex布局中分为主轴和侧轴./ 行和列 / x轴和y轴，默认的主轴方向是

属性	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

• justify-content：设置主轴上的子元素排列方式（重点）

属性	说明
flex-start	默认值从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴，则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

• flex-wrap：设置子元素是否换行(重点) 默认情况下，项目都排在一条线上，默认不换行。

属性	说明
nowrap	默认值，不换行
wrap	换行

• align-items：设置侧轴上的子元素的排列方式（单行）（重点） 该属性是控制子元素在侧轴上的排列方式，在子元素为单项是使用。

属性	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	垂直居中（元素集中）
stretch	拉伸

• align-content：设置侧轴上的子元素的排列方式（多行）,单行无效果。

属性	说明
flex-start	默认值，从侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间（重要）
stretch	设置子项元素高度平分父元素的高度

• flex-flow：复合属性，相当于同时设置了主轴方式flex-direction和是否换行flex-wrap属性。

4）常见的子项属性（3个）

• flex：定义子项目分配剩余空间，用flex来表示占多少份数。（重点）

 .box2
        {
            flex: 1;
            background-color: red;
        }

• align-self：控制子项自己在侧轴上的排列方式，默认值为auto，继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.box2
        {
            align-self: flex-end;
            background-color: red;
        }

• order：定义项目的排列顺序，数值越小，越靠前，默认为0。

.box2
        {
            order: 1;
            background-color: red;
        }

三、流式布局（rem布局）

1）rem基础

em和rem都是相对单位 em：相对于父元素字体大小来说 rem：root rem，相对于html元素字体大小来说 优点：通过修改html的字体大小来改变页面中的元素的大小可以进行整体控制

2）媒体查询

媒体查询(Media Query)是CSS3的新增语法

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用的到多媒体查询 语法规范：

@media mediatype and|not|only(media feature){
	CSS-Code;
}

• 用media开头注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature媒体特性 必须有小括号包含

1> mediatype查询类型 将不同的终端设备划分成不同的类型，称为媒体类型

值	说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

2> 关键字 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

值	说明
and	可以将多个媒体特性连接到一起，相当于“且”
not	排除某个媒体类型，相当于“非”，可省略
only	指定某个特定的媒体查询类型，可以省略

3> 媒体特性 每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，较常用的有：

值	说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

四、Less基础

1、维护css的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。

• css需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
• 不方便维护及扩展，不利于复用
• CSS没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。 Less(Leaner Style Sheet的缩写)是一门CSS扩展语言，也成为CSS预处理器。 作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。 它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。 常见的CSS预处理器：Sass、Less、Stylus Less是一门CSS预处理语言，它扩展了CSS的动态特性。

2、安装Less

1 安装nodejs 2 检查node是否安装成功：node -v 2 安装less：npm install -g less 3 检查是否安装成功：lessc -v

3、Less的使用

我们首先新建一个后缀名为less的文件，在里面写less文件

1）Less变量

变量是指没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用。

@变量名: 值;

1> 变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

@color: #ccc

2）Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。 所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。 vscode Less插件 Easy LESS插件用来把less文件编译为css文件，安装完毕后，重启下vscode。 只要保存以下Less文件，会自动生成CSS文件。

3）Less嵌套

css写法：

#header .logo{
	width: 300px;
}

Less写法：

#header{
	logo{
		width: 300px;
	}
}

如果有伪类、交集选择器，我们内层选择器前面加上&符号。 css写法

a: hover{
	color: red;
}

Less嵌套写法

a{
	&hover{
		color: red;
	}
}

4） Less运算

任何数字、颜色或者变量都可以参与运算，就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

/* Less里面写 */
@width: 10px + 5
div{
	border: @width solid red;
}
/* 生成的css */
div{
	border: 15px solid red;
}
/* Less甚至还可以这样 */
width: (@width + 5) * 2;

注意：

• 乘号(*)和除号(/)的写法
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位。

五、rem适配方案

1）我们的适配目标是什么？

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2）怎样去达到这个目标的？

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸也会发生变化，从而达到等比缩放的适配

3）rem实际开发适配方案

1> 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；(媒体查询)

2> CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

1、rem + 媒体查询 + less技术

• 设计稿常见尺寸宽度

值	说明
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、500px、720px大部分4.7~5寸的安卓设备为720px
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。

• 动态设置html标签font-size大小 1> 假设设计稿是750px 2> 假设我们把整个屏幕划分为15等份(划分标准不一定是20份也可以是10等份) 3> 每一份作为html字体大小，这里就是50px 4> 那么在320px设备的时候，字体大小为320/15 就是21.33px 5> 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的 6> 比如我们以750为标准设计稿 7> 一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem 是 2rem * 2rem 比例是1 : 1 8> 320屏幕下，html字体大小为21.33，则2rem = 42.66px 此时宽和高都是42.66，但是宽和高的比例还是1 : 1 9> 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果。
• 元素大小取值方法 1> 最后的公式：页面元素的rem值 = 页面元素值(px) / （屏幕宽度 / 划分的份数） 2> 屏幕宽度 / 划分的份数 就是html font-size的大小 3> 或者：页面元素的rem值 = 页面元素值(px) / html font-size字体大小

2、rem + flexible.js

• 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要再写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px / 10)就可以 里面页面元素rem值：页面元素的px值 / 75 剩余的，让flexible.js来计算 github地址：github.com/amfe/lib-fl…