CSS学习第十二篇
- [1. 移动Web开发rem适配布局导读](#1. 移动Web开发rem适配布局导读)
- [2. rem单位](#2. rem单位)
- [3. 媒体查询](#3. 媒体查询)
-
- [3.1 媒体查询语法简介](#3.1 媒体查询语法简介)
- [3.2 媒体查询+rem实现元素动态大小变化](#3.2 媒体查询+rem实现元素动态大小变化)
- [3.3 媒体查询引入资源](#3.3 媒体查询引入资源)
- 4.rem适配方案
-
- [4.1 rem适配方案原理](#4.1 rem适配方案原理)
- [4.2 rem最终适配方案1/2](#4.2 rem最终适配方案1/2)
- [5. vw](#5. vw)
-
- [5.1 vw介绍](#5.1 vw介绍)
- [5.2 vw和vmin的区别](#5.2 vw和vmin的区别)
1. 移动Web开发rem适配布局导读
目标：
目录：
Less额外学了
2. rem单位
课前提问：rem适配布局特色？
rem基础：
em：相对于父元素的字体大小而言
rem：相对于html元素的字体大小而言（root em）
整个页面只有一个html，但是有很多父元素。
3. 媒体查询
3.1 媒体查询语法简介
先前的rem是根据html设置的字体大小而言的，
但是这里我们把他写死了，就无法实现动态变化了。
那我们如何根据不同设备的屏幕尺寸的宽度
来修改html内的文字大小呢？
通过媒体查询
语法规范
（1）媒体类型
（2）关键字
（3）媒体特性
实操：
and是既设置前面的属性又设置后面的属性。
3.2 媒体查询+rem实现元素动态大小变化
媒体查询结合rem
我们来做一个案例
实操：
借助媒体查询
观察字体大小变化
美化一下：
3.3 媒体查询引入资源
大屏幕和小屏幕显示不一样：
代码示例：（记得加浮动）
4.rem适配方案
4.1 rem适配方案原理
进入本节课前，先思考几个问题
回答：
原理
技术使用
4.2 rem最终适配方案1/2
适配方案一：
动态设置（这里设置均分15份）
实操
rem
适配方案二
自动除以10等份（定好1rem是划分为10份的值）
暂时简要了解，后续有需要再补充
5. vw
5.1 vw介绍
vw/vh
相对单位
计算几vw（vh同理）
开发中，vw和vh会不会混用
5.2 vw和vmin的区别
B站用的是vmin
自己开发的时候用的是vw，但是有问题
横屏：
而官方的横屏：
vmin是识别高度和宽度谁更小，就用谁来适配布局。
区别在于：
