rem适配布局+媒体查询+Less的使用

本是古典何须时尚 2023-01-16 06:41 89阅读 0赞

### rem适配布局 ###

*  rem基础
 *   *  rem单位
 *  媒体查询Media Query
 *   *  语法规范
     *   *  媒体类型mediatype
         *  关键字 and|not|only
         *  媒体特性 media feature
     *  示例
     *  引入资源
     *   *  语法规范
 *  Less基础
 *   *  CSS的弊端
     *  Less介绍
     *  Less使用
     *   *  Less变量
         *  Less编译
         *  Less嵌套
         *  Less运算
 *  rem适配方案
 *   *  实际开发适配方案1
     *   *  元素大小取值方法
         *  @import导入到其他文件

# rem基础 #

## rem单位 ##

`rem`（root em）是一个相对单位，类似于`em`单位，em默认是12px，是**相对于自身**字体的大小，没有则默认继承父元素的字体大小，与em不同的是rem的基准是**相对于html元素**的字体大小  
rem优点：**rem**结合**媒体查询**能够通过控制html元素的字体大小来控制页面整体的显示

# 媒体查询Media Query #

媒体查询（Media Query）

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

## 语法规范 ##

声明媒体查询

@media mediatype and|not|only (media feature) { 
    	/*CSS Code*/
    }

### 媒体类型mediatype ###

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

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td>用于所有设备</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>用于打印和打印预览</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>用于电脑屏幕、平板电脑和智能手机等</td> 
  </tr> 
 </tbody> 
</table>

### 关键字 and|not|only ###

关键字可以将媒体类型和媒体特征连接起来一起作为媒体查询的条件

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>and</td> 
   <td>且，可以将多个媒体特征连接到一起</td> 
  </tr> 
  <tr> 
   <td>not</td> 
   <td>非，排除某个媒体类型，可以省略</td> 
  </tr> 
  <tr> 
   <td>only</td> 
   <td>指定某个媒体类型，可以省略</td> 
  </tr> 
 </tbody> 
</table>

### 媒体特性 media feature ###

每个媒体类型都有不同的媒体特性，根据不同的媒体类型设置不同的展示风格。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>定义输出设备的可见区域的宽度</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>定义输出设备中页面的最大可见区域的宽度</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td>定义输出设备中页面的最小可见区域的宽度</td> 
  </tr> 
 </tbody> 
</table>

## 示例 ##

当屏幕宽度满足条件时，body的背景颜色对应变化0-300px时为`#ff0000`,300px-800px时为`#00ff00`,800px以上为`#0000ff`

@media screen and (max-width: 300px) { 
    	body { 
    		/*body的背景颜色为红色*/
    		background-color: #ff0000;
    	}
    }
    @media screen and (min-width: 301px) and (max-width: 799px) { 
    	body{ 
    		/*body的背景颜色为绿色*/
    		background-color: #00ff00;
    	}
    }
    @media screen and (min-width: 800px) { 
    	body { 
    		/*body的背景颜色为蓝色*/
    		background-color: #0000ff;
    	}
    }

## 引入资源 ##

当样式比较繁多时，可以针对不同的媒体引入不同的CSS样式表。原理就是直接在link标签中判断设备的尺寸，然后引入不同的CSS文件（link标签中自带media属性）。

### 语法规范 ###

当页面小于640px时引入一种CSS文件

当页面大于640px时引入另一种CSS文件

# Less基础 #

## CSS的弊端 ##

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

## Less介绍 ##

less（Leaner Style Sheets）是一门CSS预处理语言，是在现有CSS语言上加入程序式语言的特性。less引入了变量、运算和函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，less的出现可以让我们用更少的代码做更多的事。

> Less的中文网址：[点这里进入][Link 1]

## Less使用 ##

新建一个后缀为`.less`的文件，在该文件中书写

### Less变量 ###

定义变量  
![定义变量][20210424223125374.png]

使用变量  
![使用变量][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]

### Less编译 ###

在less文件中编写代码后，通过相应的vscode插件可以在保存时自动将less文件编译为CSS文件放在与less文件同一目录下，这里我用vscode插件是[Compile Hero Pro][]

### Less嵌套 ###

子元素的样式可以直接写在父元素花括号里面

> 注意，如果遇到（**交集|伪类|伪元素选择器**）需要在前面添加`&`，如果内层选择器没有`&`，则它将被解析为父选择器的后代

less部分  
![less部分][less]  
编译后的CSS  
![编译后的CSS][CSS]

### Less运算 ###

任何数字、颜色、变量都可以参与运算，可以进行`+`、`-`、`*`、`/`等操作，**符号两侧需要留空格**，如果两个数其中一个有单位，则也为结果的单位，如果两个数有两个不同的单位，则结果的单位以**第一个单位**为准。  
![less运算][less 1]

# rem适配方案 #

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

## 实际开发适配方案1 ##

rem+媒体查询+less相结合

### 元素大小取值方法 ###

1.  页面元素的rem值=页面元素值(px) / (屏幕宽度 / 划分的份数)
2.  或: 页面元素的rem值=页面元素值(px) / html的font-size的大小
3.  html的font-size大小=屏幕宽度 / 划分的份数

### @import导入到其他文件 ###

在目的less文件中写`@import "common"`，即可将common.less文件中的样式导入到目的less文件中

[Link 1]: http://lesscss.cn/
[20210424223125374.png]: /images/20221022/15e61be5c23242d09eab7bab13b74016.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]: /images/20221022/2e7d8d2a29d34876bd9a6cde79ba9a55.png
[Compile Hero Pro]: https://marketplace.visualstudio.com/items?itemName=Wscats.eno
[less]: /images/20221022/7d1a7ed713d648f488bb8c8226736b54.png
[CSS]: /images/20221022/2c1f20330aec47af9067bbb7a7d4884f.png
[less 1]: /images/20221022/ad63d155fc134e3ca3f96b49bcf3abc2.png