rem 布局

rem布局

rem单位

• rem(root em)是一个相对单位，基准是相对html元素字体大小，类似em(父元素字体大小)
• 比如，根元素(html)设置font-size=12px，非根元素设置width：2rem；，转换成px就是24px。
• rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。

媒体查询

媒体查询（Media Query）是CSS3新语法。

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

媒体查询语法规范

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

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

mediatype 媒体类型

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

关键字

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

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

媒体特性

每种媒体类型都有具体个字不同的特性，根据不用媒体类型的媒体特性设置不同的展示风格。媒体特性要加小括号进行包含。

在屏幕设备中，判断屏幕尺寸大于等于800px的时候 @media screen and (min-width: 800px) { 
    body { 
    background-color: pink; } } 在屏幕设备中，判断屏幕尺寸最大为600px的时候屏幕为绿色 @media screen and (max-width: 600px) { 
    body { 
    background-color: green; } } 

案例

屏幕小于等于539px时，背景为蓝色；屏幕大于等于540px并且小于969px时，屏幕为绿色；当屏幕大于等于970px 时，屏幕为红色。

@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; } } 

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

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

媒体查询第二种引入方式

引入资源

• 当样式比较繁多的时候，我们可以针对不用的媒体使用不同stylesheets(样式表)。
• 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
• 语法规范

• 示例

维护css弊端

css是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

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

Less

less介绍

• Less（Leaner Style Sheets）是一门css扩展语言，也称为css预处理器
• 作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性
• 它在css的语法基础之上，引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事

Less使用

新建一个后缀名为.less的文件，在这个.less文件里书写less语句

• Less 变量
• Less 编译
• Less 嵌套
• Less 运算

Less变量

• 变量是指没有固定的值，可以动态改变的。因为css中的一些颜色和数值等经常使用
• @变量名：值；

1. 变量命名规范
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感
     例如：
     
     

@pink:pink; div { background-color: @pink; } 

2. 变量使用规范

Less编译

• 本质上，Less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。
• 所以，我们需要把我们的.less文件，编译生成为.css文件，这样我们的html页面才能使用它
• 推荐方法(nodejs)：在当前文件夹，使用cmd命令“lessc style.less>style.css”
• 使用Vscode插件可直接转换

Less嵌套

1. 后代选择器

div { width: 500px; height: 400px; background-color: yellow; .box { height: 200px; background-color: green; } } 

2. 在前面加上&符号，表示两个选择器交集或伪类。

• a 里面加上&.box，就表示选中的是有box类名的a标签。
• :hover前加&符，表示a的hover，不加则是a内元素的hover。

.nav { width: 200px; height: 200px; background-color: #fff; a { display: block; width: 100px; height: 100px; background-color: blue; &.box { background-color: pink; } &:hover { color: yellow; } } } 

Less运算

• 任何数字、颜色或者变量都可以参与运算。Less提供了加(+)减(-)乘(*)除(/) 算数运算。
• 除法运算时需要（）括起来或者./这么写，不然系统会默认我们写的是两个值，将不会生效。（推荐使用小括号，./是强制除法，可能会出现错误）
• 当有两个单位时候，取值第一个单位，200rem ./ 50px 结果是4rem（后面的数字不写单位也可以），如果只有一个值有单位，就取该单位。
• 运算符号左右需要加空格

div { width: 100px + 20px; height: (200px / 2); height: 200rem ./ 50px; height: 200rem ./ 50; background-color: orange; } 

rem适配方案

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

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

1. 技术方案一
   • less
   • 媒体查询
   • rem
2. 二
   • flexible.js
   • rem

总结

• 两种方案现在都存在
• 方案二更简单

rem实际开发适配方案1

rem+媒体查询+less技术

设计稿常见尺寸宽度

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

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

1. 假设设计稿是750px
2. 假设我们把屏幕划分为15等份（划分标准不一定，可以是20份也可以是10等份）
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小就是320/15 就是21.33px
5. 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

以750标准设计稿为例：

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

公式

1. 页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
2. 屏幕宽度/划分的份数 就是html font-size字体大小
3. 页面元素的rem值=页面元素值（px）/html font-size字体大小