CSS 学习笔记 day10 2021-4-15

rem适配布局

1.rem单位

rem是一个相对单位，类似于em，em是父元素字体大小

不同的是rem的基准是相对于html元素的字体大小

比如，根元素html设置font-size = 12px，非根元素设置width：2rem；则换成px表示就是24px

/*1.em相对于父元素的字体大小来说的*/
/*width: 10em;*/
/*height: 10em;*/
/*2.rem相对于html元素 字体大小来说的*/
width: 10rem;
height: 10rem;
background-color: pink;
/*3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小*/

2.1 什么是媒体查询

媒体查询是CSS3新语法

/*这句话的意思就是：在我们屏幕上 并且 最大的宽度是800px 设置我们想要的样式*/
/*max-width 小于等于800*/
/*媒体查询可以根据不同的屏幕尺寸改变不同的样式*/
@media screen and (max-width: 800px) {
  body {
    background-color: pink;
  }
}
@media screen and (max-width: 500px) {
  body {
    background-color: purple;
  }
}

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是我们最喜欢的哈市从小到大来写，这样代码更简洁

CSS的弊端

• CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
• 不方便维护及扩展，不利于复用
• CSS没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少CSS编写经验很难写出组织良好且易于维护的CSS代码项目

3.4 Less变量

3.7 Less运算

@border: 5px + 5;
div {
  width: 200px - 50;
  height: 200px * 2;
  border: @border solid red;
}

img {
  width: (82 / 50rem);
  height: (82 / 50rem);
}
//1.我们运算符的左右两侧必须敲一个空格隔开
//2.两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
//3.两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个单位为准

rem适配方案

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配

3.元素大小取值方法

（1）最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）

（2）屏幕宽度/划分的份数 就是 html font-size 的大小

（3）或者：页面元素的rem值 = 页面元素值（px）/ html font-size 字体大小

1.简洁高效的rem适配方案flexible.js

手机淘宝团队出的简介高效 移动端适配库

我们再也不需要再写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等分，但是不同设备下，比例还是一致的

我们要做的，就是确定好我们当前设备的html 文字大小就可以了

比如当前设计稿是750px 那么我们只需要把html文字大小设置为75px（750px/10）就可以

里面页面元素rem值：页面元素的px值/75

剩余的，让flexible.js来去算