移动端开发(3)——rem适配布局

最新推荐文章于 2021-09-15 17:49:56 发布

麻辣大龙虾17

最新推荐文章于 2021-09-15 17:49:56 发布

阅读量274

点赞数

文章标签： less 前端

本文链接：https://blog.csdn.net/qq_41486048/article/details/115131591

版权

rem适配布局

1 rem基础

rem单位

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

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

比如，根元素(html)设置font-size=12px，非根元素设置width:2rem，则换成px表示就是24px。

2 媒体查询

2.1 什么是媒体查询

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

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

2.2 语法规范

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

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

1.mediatype查询类型

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

在这里插入图片描述

(误：应该是screen而不是scree）

2.关键字

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

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

3.媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个，注意他们要加小括号包含

在这里插入图片描述

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

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以根据不同设备宽度，实现页面元素大小的动态变化

2.4 引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。

原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3 less基础

3.1 维护CSS的弊端

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

冗余度高、不利于维护、没有很好的计算能力。

3.2 less介绍

less(leaner style sheets)的缩写，是一门CSS扩展语言，也称为CSS预处理器。

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

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

less中文网址：http://lesscss.cn/

常见的CSS预处理器：Sass、Less、Stylus

less使用

我们首先新建一个后缀名为less的文件，在这个文件里书写less语句。

less变量
less编译
less嵌套
less运算

3.3 less变量

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

@变量名: 值;

变量命名规范

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

3.4 less编译

本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的less文件，编译生成为CSS文件，这样html页面才能使用。

vscode插件：Easy LESS

3.5 less嵌套

我们经常用到选择器的嵌套

#header .logo {
    width: 300px;
}

less嵌套写法

#header {
    .logo {
        width: 300px;
    }
}

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

内层选择器的前面没有&符号，则它被解析为父选择器的后代；
如果有&符号，它就被解析为父元素自身或父元素的伪类。

a:hover {
    color: red;
}

less嵌套写法

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

3.6 less运算（重要）

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

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

注意：

乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开
对于两个不同的单位值之间的运算，运算结果取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

4 rem适配方案

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

4.1 rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。

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

技术方案1

less
媒体查询
rem

技术方案2(推荐)

flexible.js
rem

4.3 rem适配方案1

rem + 媒体查询 + less技术

1.设计稿常见尺寸宽度

在这里插入图片描述

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

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

假设设计稿是750px
假设我们把整个屏幕划分为15等份
每一份作为html字体大小，这里就是50px
那么在320px设备的时候，字体大小为320/15就是21.33px
用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如我们以750px为标准设计稿
一个100·100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem·2rem，比例是1:1
320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时宽和高的比例还是1:1
但是已经能实现不同屏幕下，页面元素等比例缩放的效果

3.元素大小取值方法

最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数，就是html font-size的大小
或者：页面元素的rem值=页面元素值（px）/html font-size字体大小

4.4 rem适配方案2（flexible.js）

手机淘宝团队推出的简洁高效的移动端适配库，我们再也不需要写不同屏幕的媒体查询，因为里面js做了处理。它的原理是把当前屏幕分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了，比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以。剩余页面元素的rem值：页面元素的px值/75。剩下的让flexible.js去算。

github地址：https://github.com/amfe/lib-flexible