rem布局

作者: amanohina | 来源:发表于2020-11-17 11:33 被阅读0次

rem单位

rem(root em)相对单位，类似于em，em是父元素字体大小

 .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
        }
        .box p {
            width: 5em;
            height: 4em;
            background-color: skyblue;
        }

 <div class="box">
        <p></p>
    </div>

可以得到以下的结果：

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

  html {
            font-size: 30px;
        }

rem的优势就在于父元素文字大小可能不一致，整个页面只有一个<html>，可以很好的控制整个页面的元素大小比例

媒体查询

媒体查询(Media Query)是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机，Android手机，平台等设备都可以用到媒体查询

语法规范

用@media开头
mediatype媒体类型
关键字and not only
media feature媒体特性，必须有小括号包含

@media mediatype and|not|only (media feature) {
  CSS-Code;
}

mdiatype媒体类型

不同的终端设备划分为不同的类型，成为媒体类型

值解释说明

all 用于所有的设备

print 用于打印机和打印阅览

screen 用于电脑屏幕，平板电脑，智能手机等

值	解释说明
all	用于所有的设备
print	用于打印机和打印阅览
screen	用于电脑屏幕，平板电脑，智能手机等

关键字

关键字是将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件

and：可以将多个媒体特性链接到一起，相当于“且”
not：排除某个媒体类型，相当于“非”，可以省略
or：可以测试多个媒体查询的条件，只要有一个条件成立就执行，相当于“或”
only：指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具有不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格
暂时了解三个

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域宽度

    /* 媒体查询：@media媒体类型 关键字 媒体特性 */
        /* 在屏幕设备中，判断屏幕尺寸大小等于800px，最小宽度是800px */
        @media screen and (min-width: 800px) {
        /* 背景颜色为pink */
            body {
                background-color: pink;
            }
        }

最小宽度是800px，再小就没有了pink的背景色
媒体查询可以书写多个，比如在宽度为600以内是绿色，601-799是默认白色，800及以上是粉色

     /* 媒体查询：@media媒体类型 关键字 媒体特性 */
        /* 在屏幕设备中，判断屏幕尺寸大小等于800px，最小宽度是800px */
        @media screen and (min-width: 800px) {
        /* 背景颜色为pink */
            body {
                background-color: pink;
            }
        }
        /* 媒体查询可以书写多个 */
        /* 最大宽度为600px的时候，背景颜色为绿色 */
        @media screen and (max-width:600px) {
            body {
                background-color: green;
            }
        }

案例：页面宽度改变背景颜色

按照从大到小或者从小到大的思路
max-width和min-width都包含了等于
当屏幕小于540，背景颜色变成蓝色（<=539）
当屏幕大于等于540，并且小于等于969像素的时候为绿色（540=<x<=969）
当屏幕大于等于970像素的时候，背景颜色红色（x>=970）
为了防止混乱，按照从小到大的顺序来写，代码也更简洁一点

<style>
       /* 1.屏幕小于等于539px，背景是蓝色 */
       /* 2.屏幕大于等于540像素，并且小于等于969px，背景颜色是绿色 */
       /* 3.屏幕大于等于970像素，背景是红色 */
       @media screen and (max-width: 539px) {
           body {
               background-color: blue;
           }
       }
       @media screen and (min-width: 540px) and (max-width: 969px) {
           body {
               background-color: green;
           }
       }
       @media screen and (min-width: 970px) {
           body {
               background-color: red;
           }
       }
    </style>

原理：

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

rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 20px;
        }
        /* 屏幕小于640px，字号为20px */
        /* 屏幕大于等于640像素，字号为30px */
        /* @media screen  and (max-width: 639px) {
            html {
                font-size: 20px;
            }
        } */
        @media screen and (min-width: 640px) {
             html {
                 font-size: 30px;
             }
        }
        .box {
            width: 100%;
            height: 3rem;
            font-size: 1.5rem;
            line-height: 3rem;
            background-color: green;
            color: white;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">购物车</div>
</body>
</html>

引入资源

Less基础

CSS弊端

css是一门非程序式语言，没有变量，函数，SCOP（作用域）等概念
需要大量书写看似没有逻辑的代码，冗余度比较高
不方便维护和扩展，不利于复用
CSS没有很好的计算能力

Less简介与安装

CSS扩展语言，CSS预处理器
为CSS加入程序式语言的特性。且没有减少CSS功能
引入了变量，Minxin（混入），运算和函数等功能，简化了CSS编写，降低了维护成本，用更少的CSS代码做更多的事情

less中文网站：

http://lesscss.cn/

常见的CSS预处理器有：Sass，Less，stylus
Less是一门CSS预处理语言，扩展了CSS的动态特性
检查nodejs版本号

node -v

在线安装Less

npn install -g less

检查less是否安装成功

lessc -v

Less使用

创建一个后缀名为.less的文件

Less变量

指的没有固定的值，可以动态改变的，因为CSS中的一些颜色和数值等经常使用
@变量名：值;
变量命名规范
1.必须要用@作为前缀
2.不能包含特殊字符
3.不能以数字开头
4.大小写敏感
@color:pink;
.变量使用规范

//直接使用
body {
    color:@color;
}
a:hover {
    color:@color;
}

Less编译

本质上，less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，形成.css文件
所以：我们需要把我们的.less文件编译生成为.css文件，才能供html页面使用
编译方法：文件当前文件夹下使用cmd命令：

lessc style.less > style.css

Vscode插件：Easy LESS

Easy LESS用来把less文件编译成css文件
安装完毕后重启vscode
保存一下LESS文件就会自动生成css文件

less嵌套

转换后

如果遇到（交集|伪类|伪元素选择器）

内层选择器的前面没有&符号，那么他被解析为父选择器的后代
有&符号，他就被解析为父元素自身或者父元素的伪类

转换后

Less运算

任何数字，颜色，变量都可以参加运算，less提供了加减乘除算术运算

// 运算
html {
    font-size: 50px;
}
div {
    width: (2rem + 2px) * 2;
    height: 100px * 3;
    background-color: #999;
}
// 1.两个参与运算的数字，一个可以有单位，一个没单位，最终的单位就是那个唯一的单位
// 参与运算的两个数字，两个都有单位，最终单位取第一个数字的单位

也可以进行声明变量牵一发而动全身

@fontBase:50px;
html {
    font-size: @fontBase;
}
div {
    width: (2rem + 2px) * 2;
    height: 100px * 3;
    background-color: #999;
}

less运算符左右务必要加空格

rem适配方案

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸

rem实际开发适配方案

rem适配方案技术使用（市场主流）

方案一：

less
媒体查询
rem
方案二：
flexible.js
rem
总结：
1.两种方案现在都存在
2.方案2更简单，现阶段无需了解里面的JS代码

rem实际开发适配方案1

rem+媒体查询+less技术
1.设计稿常见尺寸宽度

设备	常见宽度
iPhone4.5	640px
iPhone678	750px
Android	常见320px，480px，540px，600px，720px，768px，800px，1080p

一般情况下，以一套或者两套效果图适应大部分的屏幕，放弃极端屏或者对他进行优雅降级，牺牲一些效果，现在基本以750px为准

动态设置html标签font-size大小
①.假设设计稿是750px
②.假设把整个屏幕分为15份（划分标准不一样也可以是20份或者10等份）
③.每一份作为html字体大小，这里就是50px
④.那么在320px设备的时候，字体为320/15,21.33px
⑤.用页面元素的大小，除以不同的html字体大小会发现他们比例还是相同的，比如750px为标准设计稿
比如用750为标准设计稿：
①.一个100*100像素的页面元素在750屏幕下，就是100/50转为rem也就是2rem * 2rem。比例为1:1
②.320屏幕下，html字体大小为21.33也就是2rem=42.66px，此时宽和高都是42.66但是宽和高的比例还都是1:1,
③.但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 媒体查询设置不同屏幕下的html的字号 */
        /* 设计图参考750px */
        /* 将屏幕宽度划分为15份 */
        /* 字号 = 屏幕宽度/15 */
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
            }
        }
        /* 页面中元素大小时，有一个参考，参考我们的750px屏幕的字号 */
        /* 宽高为100*100px的盒子 */
        .box {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

元素大小取值方法：
①.最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
比如：
页面宽度为750px，分为15份，一份50px，一个盒子的宽高都是100，那么rem值=100/50=2rem
②.屏幕宽度/划分的份数就是html font-size的大小
③.或者：页面元素的rem值=页面元素值（px）/html font-size字体大小

flexible.js

手机淘宝团队推出的简洁高效，移动端适配库
在js里面进行了处理，不需要再写不同屏幕的媒体查询
原理：把当前设备划分为10等份，不同设备下，比例还是一致的
我们只需要完成当前设备的html字号就行了
比如：
当前设计稿是750px。那么我们只需要把html字号设置为75px（750 / 10）就行
里面的rem值：页面元素的px值 / 75
剩余的，让flexible.js进行计算

github地址：

https://github.com/amfe/lib-flexible

不需要再手动书写媒体查询语句

更改flexible.js默认字号

在引入的CSS文件内，使用自己写的媒体查询进行声明：

@media screen and (min-width:750px) {
  html {
      font-size:75px !important;
    }
}

进行!important权重提高是因为html字号是行内样式，权重很高。

VScode插件：cssrem

改更默认字号

简化计算工作