这是我参与「第五届青训营 」笔记创作活动的第14天
移动端开发常见布局
1.1流式布局（百分比布局）
流式布局，也称为非固定像素布局。
通过盒子的宽度设置成百分比来适应屏幕的宽度，不受固定像素的限制，内容向两侧填充。
为了防止无限制的伸缩，设置max-width最大宽度和min-width最小宽度
1.2flex布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局
display:flex;
1.2.1 flex布局原理
flex是felxible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性将失效。 采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目。子元素可以横向排列也可以纵向排列。
1.2.2 父元素属性
flex-direction
子元素跟着主轴来排列，默认是x轴
白话：小孩怎么站 谁前谁后
| 属性值 | 作用 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| collumn | 从上到下 |
| column-reverse | 从下到上 |
justify-content
定义了项目在主轴上的对齐方式
白话：小孩之间的间隙如何安排
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值从头部开始 |
| flex-end | 默认值从尾部开始 |
| center | 在主轴居中对齐 |
| 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 属性的复合属性
1.2.3 子元素常见属性
flex：number表示该元素所占据的份数；
align-self
order定义项目的排列顺序
数值越小，排列越靠前，默认是0。
1.3 rem布局
前面我们介绍的流式布局和flex布局主要针对于宽度布局，而高度并没有涉及，并且为了使页面布局文字能随着屏幕大小变化、使得屏幕发生变化的时候元素高度和宽度可以等比例缩放，rem布局应运而生。
1.3.1 rem单位
rem是一个相对单位，类似于em，em是父元素字体大小。不同的是，rem的基准是相对于html元素的字体大小。页面中可能有很多个父元素，但只有一个html。可以通过修改html里面的文字大小来改变页面中元素的大小，实现对页面的整体控制。
1.3.2 媒体查询
使用@media查询，可以针对不同的媒体类型从而定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前很多苹果手机、安卓手机、平板等设备都用得到媒体查询。
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype
关键字and|not|only
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
- and：可以将多个媒体特性连接到一起，相当于“且”的意思。
- not：排除某个媒体类型，相当于“非”的意思。
- only：指定某个特定的媒体类型。
媒体特性
每种媒体类型都具备各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheet样式表。原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。
<link rel="stylesheet" media="mediatype" and|not|only (media feature)" href="mystylesheet.css"
1.3.3 适配方案
推荐使用flexible.js，当然也可以了解一下less，less主要是实现对css的优化。
安装VScode插件cssrem，帮助px转化为rem 注意设置html字体大小的基准值
- 打开设置（快捷键是ctrl+逗号）
- 点击三个小点点打开setting.json
