我的前端自学之路2020/12/31 rem适配布局
rem单位：
rem（root rem）是一个相对单位，类似于em，em是父元素字体大小，不同的是rem是基于html元素的字体大小。比如根元素（html）设置字体大小font-size=12px，非根元素设置width： 2rem；则表示非根元素宽度为24px。rem的优点就是可以通过修改页面根元素的文字大小来整体控制页面元素的大小。
媒体查询：
媒体查询（media query）
使用@media查询，可以针对不同的媒体类型，定义不同的样式。针对不同的屏幕尺寸，设置不同的样式，在浏览器重置大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面，简而言之，使用@media来自动识别设备屏幕的大小，从而相应的改变页面根元素的字体大小，达到整体控制页面元素的目的。
语法：
@media mediatype媒体类型 and|not|only关键字 （media feature媒体特性） { CSS Code}
媒体类型mediatype：
all 所有设备
print 打印预览
screen PC、平板、手机
媒体特性media feature：
width 定义输出设备中页面可见区域的宽度
max-width 定义输出设备中最大可见区域宽度
min-width 定义输出设备中最小可见区域宽度
媒体查询的一个小示例:
/*屏幕宽度在600px以内，body的背景颜色为红色*/
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
/*屏幕宽度在601px和800px之间，body的背景颜色为蓝色*/
@media screen and (min-width: 601px) {
body {
background-color: blue;
}
}
/*屏幕宽度在801px和1000px之间，body的背景颜色为黄色*/
@media screen and (min-width: 801px) {
body {
background-color: yellow;
}
}
/*屏幕宽度在1001px以上，body的背景颜色为粉色*/
@media screen and (min-width: 1001px) {
body {
background-color: pink;
}
}
rem搭配媒体查询实现元素的动态大小变化的简单示例
<section>
REM搭配媒体查询实现自适应
section>
* {
padding: 0;
margin: 0;
}
@media screen and (max-width: 1000px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 1001px) {
html {
font-size: 100px;
}
}
section {
width: 100%;
height: 2rem;
font-size: .5rem;
background-color: pink;
text-align: center;
line-height: 2rem;
}
媒体查询引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的CSS样式表，原理就是直接在link中判断设备的尺寸，然后引入不同的CSS文件，以达到页面整体布局有较大改变。
关于引入资源的小示例：
<link rel="stylesheet" href="./css/firststyle.css" media="screen and (max-width: 320px)">
<link rel="stylesheet" href="./css/secondstyle.css" media="screen and (min-width: 321px) and (max-width: 640px)">
Less基础
使用less的原因：css是一门非程序式语言，没有变量、函数、作用域等概念，css需要书写大量看似没有逻辑的代码，代码冗余度非常高，不方便维护拓展和复用，最重要的，CSS时没有计算能力的。
less，是一门css扩展语言，也成为css预处理器。它没有减少css的功能，而是在现有的css语法上，为css加入了程序式语言的特性。
常见的css预处理器除了less，还有sass、stylus
Less变量
语法：@变量名： 值；
规范：
1 .必须有@为前缀
2 .不能包含特殊字符
3 .不能以数字开头
4 .大小写敏感
//定义
@color: red;
@font20: 20px;
//使用
div {
background-color: @color;
}
span {
color: @color;
font-size: @font20;
}
Less编译
本质上，less包含一套自己的语法和解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件，所以，我们需要把less文件编译生成CSS文件，html页面才能使用。
vs-code上的less编译插件：Easy LESS （有好几个，用法不太一样）
Less嵌套
1 .子元素的样式直接写在父元素里面
2 .如果有伪类、伪元素、交集选择器，内层选择器前面要加&，不加则默认为后代选择器
Less写法：
@color: red;
@font20: 20px;
@width: 2.5rem;
@height: 1.5rem;
header {
width: 200px;
height: 200px;
background-color: @color;
a {
color: @color;
}
}
ul {
li {
width: @width;
height: @height;
.logo {
&:hover {
color: @color;
}
&::after {
content: "";
}
}
&.list {
width: @width;
}
}
}
编译后的css
header {
width: 200px;
height: 200px;
background-color: red;
}
header a {
color: red;
}
ul li {
width: 2.5rem;
height: 1.5rem;
}
ul li .logo:hover {
color: red;
}
ul li .logo::after {
content: "";
}
ul li.list {
width: 2.5rem;
}
Less运算
Less提供了基本的加减乘除运算，任何数字、颜色(16进制)、或者变量都可以参与运算
@baseFont：50px;
html {
font-size: @baseFont;
}
@border: 1px + 1;
section {
width: 82rem / @bsaeFont;
height: 82 / 50rem;
border: @border solid #ccc;
}
注意单位问题：两个数值参与运算时，结果以第一个值的单位为准，如果第一个没有单位，则以后一个值的单位为准。
rem适配方案1
rem+媒体查询+less
常见设计稿（选择的标准尺寸）尺寸宽度：
ios：750px
android：大部分4.7-5寸的安卓设备为720px，其他极端屏可以选择放弃或者对其优雅降级
动态设定html的font-size大小：
1 .假设设计稿是750px，假设把屏幕划分为15等份（也可以划分为10等份或者20等份）
2 .每一份作为html字体大小，这里就是50px
3 .那么在320px屏幕的时候，字体大小为320 / 15就是21.33PX
4 .用我们页面元素的大小，除以不同的html字体大小会发现它们比例还是相同的
5 .如果以750为标准设计稿，一个100*100像素的页面元素在750屏幕下，就是100 / 50，转换为rem就是2rem，元素的宽高为1 ： 1，而同一元素在320屏幕下，html字体大小为21.33，，则2rem=42.66px，宽和高的比例还是1 ： 1，就实现了不同屏幕下页面元素等比例缩放的效果。
元素大小的取值方法：
html字体大小 = 屏幕尺寸 / 划分的份数
页面元素大小（rem）= 页面元素大小（px） / html字体大小
rem适配方案2
flexible.js + rem
flexible.js是手机淘宝团队出的简洁高效移动端适配库，它包含了不同屏幕的媒体查询，用js做了高效的处理，它的原理是将当前屏幕划分为10等份，我们要做的，就是确定好当前屏幕的html文字大小，比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px，页面元素rem = 页面元素的px值 / 75，其他的交给flexible.js去计算。