一、移动端的三大布局方式是哪些？
1.流式布局
2.flex布局
3.rem适配布局
特别提示：移动端的三大布局在使用过程中一定要设置好视口标签以及引入初始化样式（normalize.css文件）
二、流式布局
1.什么是流式布局？
流式布局就是百分比布局，也被称为非固定像素布局。
流式布局通过将盒子的宽度设置成百分比从而实现起可根据屏幕的宽度来进行伸缩的效果。它不受固定像素的限制，内容向两侧填充。
流式布局是移动web开发中比较常见的布局方式。
2.流式布局里面有两个比较特殊的量：
max-width: ; max-height: ; 和 min-width: ; min-height: ;
它们分别代表了盒子能随浏览器页面拖动的最大宽/高度 和 最小宽/高度
三、flex布局
1.什么是flex布局？
flex是flexible Box 的缩写，意为“弹性布局”。
flex布局常常用来为盒状模型提供最大的灵活性，任何一个容器都可以被指定为flex布局。
注意：当我们将父盒子设置成为flex布局后，子元素的float、clear和vertical-align属性都将失效！
因为flex布局本身就可以让盒子在一行来显示，因此它就不需要float浮动来实现将盒子放在一行来显示的效果了，没有了浮动那么自然就不需要清除浮动clear的存在了。
而且flex布局还可以使盒子垂直居中，因此vertical-align在它这也“失职”。
2.flex布局的原理是什么？
简单来说，它就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式（子盒子可以纵向排列也可以横向排列）。
注意：在书写代码时一定要记得给父级添加flex属性，否则系统无法知道我们在这里使用的是flex布局 ！
3.flex布局的特殊性
a. 元素是随着主轴来排列的，我们可以自己改变主轴，从而改变元素的排列方式
/* 默认为： flex-direction: row; 从左向右排列（所以这个写不写效果是一样的）*/
/* flex-direction:column 从上至下 */
flex-direction: column;
b.以主轴为主的属性 (justify-content)
flex-direction: column;
/* 在主轴居中对齐 */
justify-content: center;
/* 默认从头部开始排列 */
justify-content: flex-start;
/* 默认从尾部开始排列 */
justify-content: flex-end;
/* 平分剩余空间 即每个盒子的 margin-left = margin-right*/
justify-content: space-around;
/* 先两边贴边，再平分剩余空间 */
justify-content: space-between;
}
c.以侧轴为主的属性（align)
/* align-items(单行)、align-content(多行）*/
/* align-content: center; */
/* 居中对齐 */
/* 这个的使用语法和 justify-content 的使用语法相同
单行、多行的使用语法也是一样的(举一反三）*/`
/* align-content: flex-start; */
/* align-content: space-around; */
align-content: space-between;
}
d.flex-wrap换行
/* 在flex布局中，默认子元素是不换行的 ，如果子元素设定宽/高使所有盒子在一行装不开，
它会自动缩小元素的宽度，最后再放到父元素中，使其最后仍呈现在一行来显示*/
/* flex-wrap: nowrap; 为默认值（不换行） */
/* 但是可以人为修改换行属性，使其呈现换行效果 */
flex-wrap: wrap;
e.flex-flow复合属性
/* flex-direction: column;
flex-wrap: wrap; */
/* 等同于 */
flex-flow: column wrap;
/* flex-flow 就是 flex-direction 和 flex-wrap 的简单复合写法 */
f.flex的align-self和order
以以下代码为例：
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* align-items: flex-end; */
/* align-items: flex-end; 会使得三个小盒子一起掉下来 */
}
span {
width: 150px;
height: 100px;
background-color: green;
color: #fff;
margin-right: 5px;
}
/* 目的：只要第三个盒子落到底部，其他盒子的位置不动 */
div span:nth-child(3) {
align-self: flex-end;
}
/* 目的：使第二个盒子和第一个盒子互换位置 */
div span:nth-child(2) {
/* order 的值越小位置越靠前 */
/* 因为默认的值是0，-1<0 所以第二个盒子会被调到第一个盒子前面 */
order: -1;
/* 注意：order 和 z-index 不同;z-index 是几个盒子累在一起,order 不是 */
}
</style>
g.flex布局的背景颜色渐变
/* 语法格式如下： */
/* linear-gradient(起始位置，颜色1，颜色2) 颜色的线性渐变 */
/* 注意：背景渐变必须添加浏览器私有前缀 */
/* 背景渐变默认的是由上至下的 */
background: -webkit-linear-gradient(green, blue);
` /* 从左至右 */ `
/* background: -webkit-linear-gradient(left, green, blue); */
` /* 从左上方至右下方 */ `
/* background: -webkit-linear-gradient(top left, green, blue); */
四、rem适配布局
1.em 和 rem
rem(root em)是一个相对单位，类似于em.
不同点： em是相对于父元素字体的大小，而rem是相对于根元素html的大小
可以通过以下代码来加深一下了解：
<style>
html {
font-size: 12px;
}
div {
font-size: 12px;
width: 20rem;
height: 20rem;
background-color: pink;
}
p {
/* 这个盒子的大小是120×120的 */
/* em 是相对于它的父元素的字体大小而言的 n em 就是 父盒子大小的 n 倍 */
/* width: 10em;
height: 10em; */
/* 这个盒子的大小是140×140的 */
/* rem 是相对于根元素 html 的文字大小而言的 */
/* 使用 rem 的好处就是可以通过修改 html 文字字体的大小来整体控制、调整盒子的的大小，现在盒子的大小不再是一个固定的值了 */
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
b.媒体查询
1.初级版
<style>
/* 媒体查询语法如下：
@media mediatype and|or|only (media feature) {
CSS-Code;
} */
/* mediatype 媒体类型 一般有 scree(电脑屏什么的 最为常用) print(输出设备 打印机和打印预览）all(所有设备）*/
/* and/or/only 关键词 */
/* media feature 媒体特性（必须用小括号包含着） 一般有 width max-width min-width*/
/* 注意：媒体查询可以根据不同的屏幕尺寸来改变不同的样式 */
@media screen and (max-width:800px) {
body {
background-color: pink;
}
}
@media screen and (max-width:400px) {
body {
background-color: green;
}
}
</style>
2.升级版
<style>
/* 媒体查询一般按照从小到大（推荐） 或者是 从大到小的顺序来*/
/* 1. < 540px */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 2.540px~970px */
/* @media screen and (min-width:539px) and (max-width:969px) {
body {
background-color: green;
}
} */
/* 简易版写法 */
/* 利用代码的层叠行，后面代码会将与前面代码冲突的部分取代了 */
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
/* 3.> 970px */
@media screen and (min-width:970px) {
body {
background-color: red;
}
}
/* 注意：数字后面一定要带单位，否则书写无效！ */
</style>
3.终极版
<style>
/*如果想要实现元素的动态变化（运用rem），html的值就不能写“死” */
/* 推荐从小往大了写 */
@media screen and (max-width:320px) {
html {
font-size: 50px;
}
}
@media screen and (max-width:640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
c.less的使用
首先：我们需要在外部添加一个less文件，方便书写代码
然后：我们需要在Visual Studio Code 中下载easy less插件
最后：在less文件中书写代码，再将其引入到源文件里面即可
在less文件的书写格式如下：
// 首先：定义一个变量（可以是任意一个我们需要的变量）
@color:green;
// 错误写法：(1)数字直接跟在在@后面 @1color 但是数字写在后面是可以的
// (2)定义里面有特殊字符，如 ~
// 注意：变量名是严格区分大小写的
// 然后：调用定义的变量
@font14:14px;
body {
background-color: @color;
}
div {
font-size: @font14;
}
d.less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1.less嵌套 子元素的样式直接写到父元素里面即可
a {
color:green;
// 2.如果有：伪类、伪元素选择器、交集选择器，需要在其前面加上&
// 否则系统会默认它是后代选择器
// :hover {
// color: pink;
// }
&:hover {
color: #fff;
}
}
}
.nav {
// 父元素没有内容可以直接写子元素的内容
.logo {
color: green;
}
&::before {
content: '';
}
}
e.less运算
// 1.可以直接在@border中进行加减乘除运算
// 2.带有“数字”的颜色也可以通过直接运算来改变颜色
// 注意：进行运算的时候，运算符的两边需要用空格隔开
@baseFont:50px;
html {
font-size: @baseFont;
}
@border:5px + 5;
div {
width: 200px - 50;
height: 200px * 2;
border: @border solid green;
}
img {
width: 82rem / @baseFont;
height: 82rem / @baseFont;
}
// 3.两个数参与运算，如果只有一个数带单位，最后的单位就以那个单位为准
// 4.两个数参与运算，如果两位数都带有单位，则以第一个的单位为最终单位
至此，所有有关移动端三大布局的知识（css)已经简单讲完了，实践出真知，动手试一下吧！
如有错误，请在评论区中指正！
