移动web开发之rem适配布局

最新推荐文章于 2024-04-13 21:21:47 发布

WGP鹏灬

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量316

点赞数

分类专栏：前端开发学习笔记文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_43477251/article/details/121006741

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、rem布局

1、rem单位

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

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 30px;
}
.box {
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    font-size: 20px;
}
.box p {
    /* em：相对单位，参考的是父级元素的字号大小的倍数，如果是 2em 表示字号的2倍 */
    /* width: 5em; */
    /* height: 4em; */
    /* rem：相对单位，参考的是根元素 html 的字号大小的倍数，如果是 2rem 表示 html 元素字号的 2 倍 */
    width: 5rem;
    height: 4rem;
    background-color: hotpink;
    /* rem 优势：参考元素是 html ，一个页面中只有一个 html 元素，可以实现整体控制 */
}

2、媒体查询（@media）

判断屏幕宽度，CSS3新增语法，类似于触发条件，如果满足会应用其中的样式，否则不执行

可以针对不同媒体类型定义不同的样式
可以针对不同屏幕大小设置不同样式
重置浏览器大小过程中，页面会根据浏览器的宽度和高度重新渲染页面
目前移动端设备都可以使用媒体查询

语法规范

必须使用@mesia开头
mediatype - 媒体类型
and、not、only - 关键字
media featyre - 媒体特性，必须由小括号包含

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

（1）mediatype - 媒体类型

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

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕,平板电脑,智能手机等（最常用）

（2）关键字

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

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

（3）媒体特性

每种不同的媒体类型具有不同的特性，根据不同的媒体类型的媒体特性设置不同的样式风格，要加小括号进行包含

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

（4）案例——根据页面宽度改变背景颜色

实现思路

按照从大到小的或者从小到大的思路
注意我们有最大值max-width和最小值min- width都是包含等于的
当屏幕小于540像素，背景颜色变为蓝色(x<= 539)
当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色( 540=< x <= 969)
当屏幕大于等于970像素的时候，背景颜色为红色( x>= 970)

注：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们]最喜欢的还是从小到大来写，这样代码更简洁

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

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

3、引入资源

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

<style>
    /* 1.需求一：屏幕宽度小于640px，大于320px时，让两个div单独占一行 */
    /* 2.需求二：屏幕宽度大于640px，让两个div并排一行显示 */
    /* 建议：从小到大进行引入 */
    /* 根据媒体查询条件，分别引入 css 文件 */
</style>
<link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">

二、Less基础

1、css弊端

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

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

2、Less介绍

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

Less中文网址: lesscss.cn/
常见的CSS预处理器: Sass、 Less、 Stylus
Less是一门CSS预处理语言，它扩展了CSS的动态特性。

3、Less安装

安装nodejs,可选择最新的版本，网址: https://nodejs org/en/download/
检查是否安装成功，使用cmd命令(win10 是window +r打开运行输入cmd)输入 ” node -v "查看版本即可
基于node.js在线安装Less，使用cmd命令”npm install -g less”即可
检查是否安装成功，使用cmd命令“lessc -v ”查看版本即可

4、Less使用

（1）Less变量

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

// less 变量
// 创建变量
// 变量命名规则：1、必须以 @ 开头， 2、不能包含特殊符号，
// 3、数字不能作为开头，4、大小写敏感
@color: yellow;
@Color: deeppink;
@fs14: 14px;
// 变量使用
div {
  background-color: @color;
}
h2 {
  background-color: @color;
}

（2）Less编译

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器,编译生成对应的CSS文件。所以，我们需要把我们的.less文件，编译生成为.css 文件，这样我们的html页面才能使用。

方法(nodejs) ：在当前文件夹，使用cmd命令“lessc style.less > style.css”

推荐方法：VScode安装Easy LESS插件，重启后每当保存less文件会自动生成一个同名的css文件，然后在html文件中引入css即可

（3）Less嵌套

如果有&符号，它就被解析为父元素自身或父元素的伪类

// less 嵌套
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
  // 后代选择器
  .logo {
    width: 100px;
    height: 100px;
    background-color: green;
  }
}
.nav {
  width: 200px;
  height: 200px;
  background-color: pink;
  // 后代选择器
  a {
    display: block;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    // 交集选择器
    &.box {
      background-color: yellowgreen;
    }
    // 伪类选择器
    &:hover {
      background-color: deeppink;
    }
  }
}

（4）Less运算

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

注：

参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位
参与运算的两个数字，两个都有单位，最终单位取第一个数字的单位
less的运算符左右必须加空格
除法外层需要添加括号，例如width: (200rem / 50px)

// less 运算
@baseFont: 50px;
html {
  font-size: @baseFont;
}
div {
  // width: 200px + 50;
  // height: 200px * 1.5;
  // rem 的单位
  // width: (200rem / 50px);
  // height: (300rem / 50);
  // width: (200rem / @baseFont);
  width: 200px + 2rem;
  height: (300rem / @baseFont);
  background-color: #999 - #333;
}

三、rem适配方案

1、思考

我们适配的目标是什么？
怎么取达到这个目标的？
在实际的开发当中使用？

答：

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

2、rem实际开发适配方案

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

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

方案1：less + 媒体查询 + rem
方案2：淘宝flexible.js + rem （推荐）

（一）方案1

（1）常见设计稿尺寸

设备	常见宽度
iphone 4/5	640px
iphone 6/7/8	750px
Android	常见320px. 480px、 540px、 600px、 720px、 768px、 800px、 1080px 目前市场主流设备尺寸按照1080px设计

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

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

假设设计稿为750px
人为假设把屏幕分为15等份（也可以是其他数字）
每一份作为html字体大小，就是50px
那么适配比如320px的设备时，字体大小为320/15 就是 21.33px
用我们的页面大小除以不同的html字体大小，就可以得到想要的rem数值

比如我们以750px为标准设计稿：

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

元素大小取值方法：

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

（二）方案2

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

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

vscode插件cssrem：这个插件会在你输入px值的时候提供选项自动转换成rem数值，vscode有一个默认的rem字号，我们可以更改默认的rem字号（在设置里面直接搜索rem即可），然后重启vscode就可以了

WGP鹏灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动web开发之rem适配布局

一、rem布局1、rem单位rem（root em）是一个相对单位，类似于em，em是父元素字体大小rem的基准是相对于<html>元素的字体大小比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 转换成px表示就是24px优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好地来控制整个页面的元素大小比例* { margin: 0; padding: 0;}html { fo
复制链接

扫一扫