flex布局，rem布局，自适应布局，响应式布局，Bootstrap
传统布局与flex布局：
传统布局：
1.兼容性好，
2.布局繁琐，
3.局限性，不能再移动端很好的布局
flex弹性布局
1.操作方便，布局极为简单，移动端应用很广泛，
2.PC端浏览器支持情况较差
3.ie11或更低版本，不支持或仅部分支持
注意：当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效
建议：
1.如果是PC端页面布局，我们还是传统布局
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
父属性
1.align-content设置侧轴上的子元素的排列方式（多行）：
flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
strech：设置子项元素高度平分父元素高度
2.align-items设置侧轴上的子元素排列方式：（这个针对的是单行）
flex-start：默认值从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸
3. flex-direciton：
这是规定沿着x轴方向排列：
row：默认值从左到右
row-reverse：从右到左（简单了解我们的翻转）
这是规定沿着y轴方向排列：
olumn：从上到下
column-reverse：从下到上
4.# flex-flow：
flex-flow属性是flex-direction和flex-wrap属性的复合属性`
flex-flow：row wrap；
5.# flex-wrap设置子元素是否换行：
原因：flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
nowrap：默认不换行
wrap：换行
6.# justify-content设置主轴上的子元素排列方式：
使用属性之前一定要确定好主轴是哪个
flex-start：默认值从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：让子元素居中对齐
space-around：让子元素平分空间
space-between：先让盒子两边贴边，然后让其他的盒子平分剩余的空间
子属性
flex属性：定义子项目分配剩余空间，用flex来表示占多好份数
rem的使用方法：r是root单词的缩写
指相对于根元素的字体大小的单位，不管是web端还是移动端用法都是一样的
（1）HTML标签
123
（2）CSS样式
html {
font-size: 16px;
}
div {
font-size: 1rem;
width: 20rem;
height: 20rem;
background-color: red;
}
举例：
（1）HTML标签
123
（2）CSS样式
（3）JS文件
移动端 REM 适配
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
-
postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem
-
lib-flexible 用于设置 rem 基准值
下面我们分别将这两个工具配置到项目中完成 REM 适配。
（1）使用 lib-flexible 动态设置REM 基准值（html 标签的字体大小）
安装依赖：
# yarn add amfe-flexible
npm i amfe-flexible
然后在 main.js 中加载执行该模块：
import 'amfe-flexible'
最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px
例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px
（2）使用 postcss-pxtorem 将 px 转为 rem
安装依赖：
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
然后在项目根目录中创建 postcss.config.js 文件：
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
配置完毕，重新启动服务。
最后测试：刷新页面，审查元素样式查看是否已将 px 转换为 rem。
这是没有配置转换之前的。
这是转换之后的，可以看到 px 都被转换为了 rem。
需要注意的是：
-
该插件不能转换行内样式中的
px，例如
module.exports = {
// plugins配置要使用的相关插件
// 'autoprefixer'自动添加浏览器厂商声明前缀，用来兼容不同的浏览器
// vuecli已经在内部配置了'autoprefixer'，
// plugins: {
// 'postcs-pxtorem'将px转为rem
'postcss-pxtorem': {
// rootValue转换的跟元素基准值
// 正常情况下按照你的设计稿来
// 如果750宽的设计稿，那么你写750/10
// 那么我们就可以在设计稿中测量多少写多少
// 如果375宽的设计稿，那么你写375/10
// vant组件库基于375宽写的
// 移动端页面都是以iphone6/7/8为原型设计的
// 写成37.5的话那么就需要将你测量的数据除以2
rootValue: 37.5,
// propList：需要转换的css属性
// *就是所有属性都要转换
propList: ['*']
}
}
自适应布局代码：
（1）左侧固定，右侧自适应
左侧固定，右侧自适应
（2）两侧固定，中间自适应
两侧固定，中间自适应
（3）中间固定
Document
什么是媒体查询：
为不同尺寸的屏幕设定不同的CSS样式，要进行判断，在移动端中使用比较频繁
移动端：
（1）HTML标签
（2）CSS样式
min-device-width：最小屏幕宽度
max-device-width:300px：最大屏幕宽度
.div0 {
width: 100px;
height: 200px;
}
/* 最小的屏幕尺寸是200px */
屏幕宽度在200-300px之间，盒子背景颜色是红色
@media screen and (min-device-width:200px) and (max-device-width:300px) {
.div0 {
background-color: red;
}
}
@media screen and (min-device-width:301px) and (max-device-width:500px) {
.div0 {
background-color: blue;
}
}
PC端
（1）HTML标签
（2）CSS样式
.div0 {
width: 100px;
height: 200px;
}
/* 最小的屏幕尺寸是500px */
@media screen and (min-width:500px) and (max-width:700px) {
.div0 {
background-color: red;
}
}
@media screen and (min-width:700px) {
.div0 {
background-color: blue;
}
}
简单案例：
（1）HTML标签
（2）CSS样式
* {
margin: 0px;
padding: 0px;
}
.div0 {
width: 100%;
height: 200px;
div {
float: left;
height: 200px;
}
}
// 1行3个div
// 100-200
@media screen and (min-device-width:100px) and (max-device-width:200px) {
.div0 {
div {
width: 33.3%;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
}
}
// 2行3个div
// 300-500
@media screen and (min-device-width:300px) and (max-device-width:500px) {
.div0 {
div {
width: 50%;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
}
}
// 3行3个div
// 501-900
@media screen and (min-device-width:501px) and (max-device-width:900px) {
.div0 {
div {
width: 100%;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
}
}
布局容器和栅格系统：
布局容器：
1…container类用于固定宽度并支持响应式布局的容器,两侧会有留白
举例：
布局容器：有固定宽度，距离两侧有一定的距离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yW7WVnlA-1617332421584)(D:\项目笔记\css\响应式布局\捕获.PNG)]
2…container-fluid用于100%宽度，占据全部视口（viewport）的容器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IjrzGtMl-1617332421589)(D:\项目笔记\css\响应式布局\1.PNG)]
栅格系统：
在行中可以添加列，只有列才可以作为容器的直接子元素，但列数之和不能超过平分的总列数，比如12，如果大于12，则自动换到下一行
xs----------超小屏，sm----------小屏（750px），md----------中屏（970px），lg----------大屏（1170px）
example：
表示一行有4列，一行有8列，md是中等屏幕的意思，可以替换成别的
//一行中有2个盒子，盒子1占4分，盒子2占8分
4列
8列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gT5XQE2K-1617332421595)(D:\项目笔记\css\响应式布局\2.PNG)]
4+4+5>12,多出来的就会换行
4列
4列
5列
列偏移：
在列元素上添加col-md-offset-8，表示该列向右偏移8个列的宽度
col-md-offset-8加上这个属性列就会发生偏移
4列
4列
5列
5列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7B6nwD8z-1617332421608)(D:\项目笔记\css\响应式布局\3.PNG)]
列排序：
在列元素上添加 col-md-push-1表示向右偏移并且浮动1格， col-md-pull-1表示向左偏移并且浮动1格
4列
4列
5列
5列
5列
列嵌套：
理论上说一行可以被分成12格，如果有嵌套，里边的格又可以被分成12格
123
1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abrUrqnf-1617332421615)(D:\项目笔记\css\响应式布局\4.PNG)]