(rem+媒体查询+less)的适配布局

一、rem

1、rem是什么

rem（root em）是一个相对单位，类似与em，em父元素字体大小

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

比如：根元素（html）设置font-size=12px，非根元素设置width=12px;非根元素设置width：10rem；则换成px表示就是120px

html {
            font-size: 12px;
        }

        .box {
            width: 10rem;
            height: 10rem;
            background-color: blue;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SMsx65p-1610612035455)(D:\桌面\临时文件\MK图片\image-20210114112847655.png)]

**优势：**父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的大小

2、为什么使用rem布局

其他布局存在的问题

• 页面中的文字不能随着屏幕的变换而变化
• 百分比布局和flex布局主要针对宽度布局，高度却被忽略

采用rem布局，可以让屏幕发生变化时，元素的高度和宽度以及文字的大小都能等比例缩放

二、媒体查询

1、什么是媒体查询

媒体查询（media query）是css3的新语法

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

2、为什么使用媒体查询

在使用rem作为元素单位时，元素的尺寸会随着html中的font-size的变化而变化。

当屏幕大时，设置的font-size为较大值，元素就会变大；

当屏幕小时，设置的font-size为较小值，元素就会变小；

这时候就可以使用媒体查询来随时改变html中font-size的值，但其不是唯一的方式

3、媒体查询的语法

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

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

3.1、媒体查询类型

类型	说明
all	全部媒体类型
screen	彩色屏幕最常用的介质类型，一般和屏幕大小表达式联合使用
handheld	小屏幕和流量有限的手持设备(并不使用)
print	提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果。
braille	盲文触摸装置。
embossed	分页盲文打印机。
projection	投影，给投影机使用。
speech	语音朗诵，用于屏幕阅读软件。
tty	固定间距字符网格，例如功能机那样的
tv	智能电视设备。

3.2、媒体查询关键字

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

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

3.3媒体查询特性

属性	说明
width	视口宽度
height	视口高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度
orientation	检查设备处于横向还是纵向
aspect-ratio	基于视口宽度和高度的宽高比
color	每种颜色的位数
color-index	设备的颜色索引表中的颜色数
resolution	用来检测屏幕或打印机的分辨率

3.4媒体查询的书写规则

• 从大到小：如果使用最大值(max-width)最为判断条件，那么就应该从大到小写
• 从小到大：如果使用最小值(min-width)最为判断条件，那么就应该从小到大写

举个栗子

需求如下

1. 文档内容默认字体为白色，背景为灰色
2. 屏幕宽度小于等于540时，字体为红色，背景为白色
3. 屏幕宽度小于800时，字体为黑色，背景为黄色

按照描述，一步步往下写，使用max-width作为限定使用的属性结果如下：

body {
    color: #fff;
    background-color: #aaaaaa;
}
@media screen and (max-width: 540px) {
    body {
        color: #a00;
        background-color: #fff;
    }
}
@media screen and (max-width: 800px) {
    body {
        color: #000;
        background-color: yellow;
    }
}

很明显，这两个页面的样式竟然是一样的，屏幕小于540px的媒体查询并没有起到作用。那么问题出在哪里呢

在css中，权重相同的样式，在同时满足工作条件时，写在后面的样式会覆盖前面的值

修改后的内容如下：

body {
    color: #fff;
    background-color: #aaaaaa;
}
@media screen and (max-width: 800px) {
    body {
        color: #000;
        background-color: yellow;
    }
}
@media screen and (max-width: 540px) {
    body {
        color: #a00;
        background-color: #fff;
    }
}

**结论：**把限定更小的媒体查询样式放在代码的后面

三、less基础

1、css存在的问题

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

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

2、less简介

less（leanerStyle Sheets）是一门css扩展语言，也成为css预处理器

作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性

它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

less是一门css预处理语言，它扩展了css的动态特性

3、less编写和编译

先创建.less文件，然后将其编译成最终使用的css文件，因为html中只能引入css文件，每次更新less文件后，需要重新编译成css文件

编写

@color:orange;
body {
  background-color: @color;
}
.box {
  width: 200px;
  height: 200px;
  background-color: @color;
}

编译

安装 vs code 插件 easy less

在 .less 文件中保存代码，就会自动生成同名的 css 文件

在 html 文件中引入 css 文件即可

4、less语法

4.1变量

变量是指没有固定的值，可以改变的。因为我们css中的而一些颜色和数值等经常是使用

@变量名：值

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

@count:30

4.2嵌套

.box{
    width:200px;
    height:200px;
    background:red;
    div{
       width:100px;
       height:100px;
        background:black;
    }
}

交集|伪类|伪元素选择器 ，利用&进行连接

a:hover{
    color:red;
}

a{
  &:hover{
      color:red;
  }
}

4.3、运算

任何数字、颜色或者变量都可以参加运算。less提供了加减乘除运算符

@count:20px;

div{
    width:@count/10;
    height:@count/10;
}

/*生成的css*/

div{
    width:2px;
    height:2px;
}

• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 对于两个值之间只有一个单位，则运算结果就取该单位

4.4引入

在less文件中引入另一个less文件使用@import

格式：

@import '文件名';

@import 'common'

四、rem适配方案

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

技术方案：

1.less+rem+媒体查询

2.flexible.js+rem

总结：

两种方案现在都存在。

方案2 更简单，现阶段大家无需了解里面的js代码。

五、开发中需设置初始化样式

1、设置视口

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2、引入初始化样式

<link rel="stylesheet" href="css/normalize.css">

3、设置公共less文件

@count: 15;

@media screen and (min-width: 320px) {
  html {
    font-size: 320px / @count;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / @count;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @count;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 384px / @count;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 400px / @count;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 414px / @count;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 424px / @count;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 480px / @count;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 540px / @count;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 720px / @count;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @count;
  }
}

总结：

1. htmlfont-size的大小 = 屏幕宽度/划分的份数
2. 页面元素的rem值 = 页面元素值（px）/(屏幕宽度/屏幕划分的份数)