rem适配布局（rem+less+媒体查询和 rem+flexible.js）

本文链接：https://blog.csdn.net/u013773608/article/details/127837175

rem基础

em是一个相对长度单位，是相对于父元素字体大小。

rem也是一个相对长度单位，类似于em，它的单位长度取决于根标签html的字体尺寸。rem即root em的意思，中文翻译为根em。

浏览器的文本尺寸一般默认为16px，即默认情况下：1rem = 16px
rem布局原理：根据CSS媒体查询功能，更改根标签的字体尺寸，实现rem单位随屏幕尺寸的变化。

媒体查询

什么是媒体查询？

css3 新语法

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

媒体查询语法

@media mediaType and|not|only (media feature) {
    css-code
}
例：
@media screen and (max-width:600px) {
}

mediaType属性值：

all——用于所有设备
print —— 用于打印机和打印预览
screen——用于电脑屏幕，平板电脑，智能手机等。
speech——应用于屏幕阅读器等发声设备

关键字：

and：可以将多个媒体特性连接到一起，相当于"且"的意思
not：排除某个媒体类型，相当于"非"的意思，可以省略
only：指定某个特定的媒体类型，可省略

媒体特性：

width：定义输出设备中页面可见区域的宽度
min-width：定义输出设备中页面最小可见区域宽度
max-width：定义输出设备中页面最大可见区域宽度

使用：

1、引入资源。直接在link中判断设备的尺寸，然后引用不同的css文件（适用于屏幕布局变化比较大的，采用多套css布局）

当屏幕的宽度大于等于320px的时候，应用 A.css
<link rel="stylesheet" href="A.css" media="screen and (min-width: 320px)">

当屏幕的宽度大于等于640px时，应用B.css
<link rel="stylesheet" href="B.css" media="screen and (min-width: 640px)">

2、另一种方式，即直接写在 style 标签里或css文件中

@media screen and (max-width: 600px) { 
  body {    
       background: #ccc;
  }
}

Media使用说明举例

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么就是错误的！因为如果是1440,由于1440>768那么你的1200就会失效。

划重点！！用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

rem+媒体查询实现元素动态变化

@media (min-width: 320px){ 
    html{
        font-size: 50px;
    }
}
@media (min-width: 640px){ 
    html{
        font-size: 100px;
    }
}

less基础 http://lesscss.cn/

背景：css冗余度很高；不便于维护及扩展，不利于复用；没有计算能力

什么是Less？

Less（Linear Style Sheets）是一门 CSS 扩展语言，也称为CSS预处理器。
在css语法基础上增加了变量、Mixin、运算及函数等特性，使 CSS 更易维护和扩展
Less 既可以在客户端上运行，也可以借助Node.js在服务端运行。

Less安装：

less需要运行在node.js的环境下，所以需要先安装node.js
验证有没有安装好node.js只需要在cmd命令中输入node -v
安装less，在cmd中通过命令安装：npm install -g less
检查是否安装成功，使用cmd命令查看版本即可：lessc -v

变量命名规范：（@变量名: 值）

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@fontColor: red;
div {
    color: @fontColor;
}

Less 编译

VSCode的Less插件：Easy LESS、

该插件用来把Less文件编译为 css文件。只要保存一下Less文件，会自动生成同名的CSS文件
在HTML页面中将编译后的CSS文件引入即可

Less 嵌套

基本嵌套规则

如果有 & 符号，它就被解析为父元素自身或父元素的伪类

Less 混合 (核心)

Less中允许将公共的css样式存放在.xxx函数体中，并以.xxx()形式调用

Less中的混合采取就是抽离css公共样式思想。注：定义函数名时，必须以.开头！

普通调用

2. 带参数调用

可以在函数括号中通过@xxx定义形参，多个形参之间以逗号隔开，在调用时传入实参

以@xxx:值的方式定义形参的默认值，当没有传入对应的实参时，默认值会生效

3. 指定形参调用

在调用函数时，可以通过@xxx:值来指定形参的值

匹配函数调用

定义函数时，允许在所有形参的最前面定义一个占位符
在调用函数时，可以传入占位符，根据占位符来调用匹配的函数
当占位符为@_时，则代表全局匹配，不论传入什么占位符，该函数都会被调用

arguments形参

在定义函数时，默认会有一个@arguments形参，他代表了所有形参的合集

Less 运算

/* Less 里面写 */
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}

/* 生成的css */
div {
    border: 15px solid red;
}
/* Less 甚至还可以这样 */
width: (@width + 5) * 2;

在less中，如果希望语句不被less编译，而是被css编译，则可以采取以下写法:~"不被Less编译的内容"

div {
  width: ~"calc(100vh - 20vh)"
}

坑：less中加法+，减法-，乘法*可以直接写，但是除法/需要（）括起来

Less继承

继承语法与混合类似，只不过在定义继承时不需要在括号
继承时通过extend(.xxx)方式继承
继承后会编译成并集选择器，有利于提高css性能
继承不灵活性能高混合灵活性能低

rem 两种适配方式

　技术方案1 ： rem + 媒体查询 + less

　技术方案2：rem + flexible.js（推荐）

方式一：（rem + less + 媒体查询）

　1.动态设置 html 标签 font-size 大小

　　① 假设设计稿是 750px，假设整个屏幕划分为 15 等分（划分标准不一，可以是20份，也可以是10份），每一份作为 html 字体大小，这里就是 50px

　　② 在320px 设备的时候，字体大小为 320 / 15 就是21.33px

　　③ 用页面元素的大小除以不同的 html 字体大小会发现他们的比例还是相同的

　　④ 比如以 750px 为标准设计稿，一个 100*100像素的页面元素在 750 屏幕下，就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是1:1；在320 px屏幕下，html字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1:1 ，但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果。

　　原理总结：先拿一个标准的稿件（750px）来算出 rem 值，剩下的屏幕，只要把html的文字大小的值算出来，就可以等比例缩放。

　　算法：（元素大小取值方法）

　　　① 最后的公式：页面元素的 rem 值 = 页面元素（px） / （屏幕宽度 / 划分的份数）；// 100px / ( 750px / 15 )；

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

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

　2. import 导入样式

　　语法：

　　　　@import “common”； // 在新的 index.less 中导入 common.less 文件

　　注意：

　　　　@import 导入的意思，可以把一个样式文件导入到另外一个样式文件里面

　　　　link 是把一个样式文件引入到 html 页面里面

方式二：（flexible.js + rem 适配）

　1. 插件安装（cssrem）

VSCode 安装 cssrem 插件，可以实现 px 转换为 rem 的操作
设置 —>setting.json —> cssroot 把字体大小设置为 75（因为稿件是750px，有划分了10等份）
保存重启 VSCode

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

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

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

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

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

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

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

　　　剩余的，让 flexible.js 来计算

　3. 需要强制设定屏幕超过750px ，就按照 750px 的设计稿来设计，不会让页面超过 750px　　

注意需要用!important提权

    @media screen and （min-width：750px）{    //  屏幕大于等于750px 的情况下
　　　　html{
　　　　　　font-size：75px !important;    //提升权重
　　　　}
　　}