Rem 自适应原理与应用

前言

移动端适配有很多方案,这篇文章将根据 rem 自适应的原理进行讲解,接下来跟着作者的思路一起来看看吧!

原理

在搞清楚 rem 适配之前,我们先来了解一下什么是 rem?

rem 是一种相对长度单位,它相对于根元素的字体大小(即HTML元素的字体大小)来计算。它的特点是可以根据根元素的字体大小进行缩放,从而实现页面元素的自适应。

举个栗子来说明 rem 的用法:

假设我们将根元素字体大小设置为 16px,然后我们想要设置一个段落的文字大小为 20px。如果我们使用 rem 单位,我们可以这样设置:

html {font-size: 16px; /* 设置根元素字体大小为16px */
}p {font-size: 1.25rem; /* 设置段落的文字大小为根元素字体大小的1.25倍 */
}

在这个栗子中,1rem 等于根元素的字体大小,即16px,所以设置段落的字体大小为 1.25rem 就相当于 20px(16px * 1.25 = 20px)。

一句话总结

rem:相对于根元素的 fontSize 大小,也就是 html 的fontSize大小。

实现

上面我们说了,我们需要根据尺寸的不同去动态修改根元素的字体大小,那实现工作就转换成了

先检测窗口尺寸变化

修改根元素字体大小

好的既然已经知道怎么实现了,我们再来理一下实现思路!

如果我们按照上面的栗子,将段落的文字大小设置为 1.25rem,然后根据移动端机型尺寸大小的不同,去动态修改根元素,也就是 html 的 font-size 的大小。

如果根元素的字体大小发生变化rem 会自动进行计算,从而改变段落字体的大小,这样是不是就实现了自适应。

所以我们现在需要将段落字体大小写成 1.25rem,注意这里需要写死,随着窗口的变化,1.25rem 会自动进行计算。

那如果所有的 px 单位我们都手动写成 rem 是不是有些麻烦,我们需要自己去计算,不太符合我们的实际开发。

我们肯定希望只写 px 单位,rem 可以自动转换。

这里就介绍一下 postcss-pxtorem 这款插件。

postcss-pxtorem插件

postcss-pxtorem 是一个 PostCSS 插件,用于将像素单位(px)转换为 rem 单位,以便更好地适应不同屏幕尺寸和密度。

安装

npm install postcss-pxtorem --save-dev

 配置

// postcss.config.jsmodule.exports = {plugins: {'postcss-pxtorem': {rootValue: 10, // 1rem 等于 10pxpropList: ['*'], // 所有属性都转换},},
};

使用

安装并配置好 postcss-pxtorem 后,在编写 CSS 时,你可以使用 px 单位,插件会自动将其转换为 rem 单位。

/* 输入 */
.example {font-size: 16px;margin: 20px 10px;
}/* 输出 */
.example {font-size: 1rem; /* 如果 rootValue 设置为 16 */margin: 1.25rem 0.625rem;
}

 如图所示:

这样一来,我们只需要负责编写 px 即可,转换 rem 的事情交给插件即可。 

注意:如若vue-cli-service的版本为5,则按以上配置。如若vue-cli-service的版本为4,可直接在vue.config.js中进行配置。详情可参考下面这篇文章。

参考链接如下:(23条消息) vue项目中postcss-pxtorem的配置失败问题 style-resources-loader的相关配置_postcss-pxtorem不生效_清9余人的博客-CSDN博客

监听窗口变化

上面我们已经使用插件将 px 转化成了 rem,接下来我们就需要检测窗口的变化,动态修改 rem 即可。

创建 src\plugin\flexible\index.js

/* eslint-disable */
(function () {changeSize()function changeSize() {document.documentElement.style.fontSize = (document.documentElement.clientWidth * 10) / 375 + 'px'}window.addEventListener('resize', changeSize, false)// 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)window.addEventListener('pageshow', function (e) {if (e.persisted) {changeSize()}})
})()

这是一段自执行代码,我们把它引入 main.js,页面加载时将会自动执行。

这里的 html 字体大小利用了一个简单的数学公式,当我们默认设置以屏幕 375px 为基准,此时的字体大小为 10px

 那么浏览器窗口大小改变的时候新的 htm 的 fontSize(clientWidth  新的值)就是clientWidth*10/375(交叉相乘)

375      clientWidth  

10        newFontSize

newFontSize = clientWidth*10/375

默认我们配置的字体大小为10px(与postcss.config.js文件中一致),大家可以根据自己所需要去配置即可。

记得引入main.js文件中

import './plugin/flexible/index'

测试

窗口大小为375时

窗口大小为414时

newFontSize = clientWidth*10/375 = 414*10/375 = 11.04

 窗口大小为390时

newFontSize = clientWidth*10/375 = 390*10/375 = 10.4

可以看到随着尺寸的变化,fontSize 也是在变化的。

我们右侧的宽高字体大小始终为 rem单位不变,这样随着根元素字体大小的变化,我们的元素也可以自适应变化了!

总结

实现 rem 单位自适应,需要借助 postcss-pxtorem 这款插件将 px 转换为 rem,需要检测窗口的变化去设置根元素的字体大小,从而实现 rem 自动计算,实现自适应。

以上就是 rem 单位实现自适应的所有内容,如果你感觉写的还不错,对你有帮助的话,可以点个赞支持一下,你的支持就是作者最大的动力 !

源码

所有代码都已经提交到 GitHub

GitHub:chenyajun-create/pxToRem (github.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703737.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机学习(5)-----蜂鸣器的介绍与使用

前言:感谢您的关注哦,我会持续更新编程相关知识,愿您在这里有所收获。如果有任何问题,欢迎沟通交流!期待与您在学习编程的道路上共同进步。 目录 一. 蜂鸣器的介绍 1.蜂鸣器介绍 2.压电式蜂鸣器 (无源…

LeetCode 第一题: 两数之和

文章目录 第一题: 两数之和题目描述示例 解题思路Go语言实现 - 一遍哈希表法C实现算法分析 排序和双指针法Go语言实现 - 排序和双指针法C算法分析 暴力法Go语言实现 - 暴力法C算法分析 二分搜索法Go语言实现 - 二分搜索法C算法分析 第一题: 两数之和 ‍ 题目描述 给定一个整…

6.2 认证授权模块 - 继承JWT、网关认证

认证授权模块 - 继承JWT、网关认证 文章目录 认证授权模块 - 继承JWT、网关认证一、JWT1.1 普通令牌1.2 JWT 令牌介绍1.3 测试生成JWT 令牌1.3.1 TokenConfig1.3.2 授权服务器配置 AuthorizationServer1.3.3 WebSecurityConfig 安全管理配置1.3.4 返回信息 1.4 资源服务集成 JW…

《乱弹篇(十九)围炉诗话》

闲来无事,近日浏览中国古代文学书藉,读罢《新嫁娘词》中的一首五言绝句诗,觉得妙趣横生,艺术造诣甚高。今天恰逢春潮寒意还浓,气温很低,笔者雅兴勃发,便开足暖气,也附庸风雅地来一番…

WSL2配置Linux、Docker、VS Code、zsh、oh my zsh(附Docker开机自启设置)

0. 写在前面 本篇笔记来自于UP主麦兜搞IT的合集视频Windows10开发环境搭建中的部分内容 1. 安装WSL2 按照微软官方文档进行操作,当然也可以直接wsl --install 也可以按照 旧版手动安装的步骤 来进行操作 选择安装的是Ubuntu 20.04 LTS 注:WSL默认安装…

抖音视频提取软件使用功能|抖音视频下载工具

我们的抖音视频提取软件是一款功能强大、易于操作的工具,旨在解决用户在获取抖音视频时需要逐个复制链接、下载的繁琐问题。我们的软件支持通过关键词搜索和分享链接两种方式获取抖音视频,方便用户快速找到自己感兴趣的内容。 主要功能模块:…

计算机设计大赛 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习图像风格迁移 - opencv python 该项目较为新颖,适合作为竞赛课题…

pytorch -- CIFAR10 完整的模型训练套路

网络结构 代码 # CIFAR 10完整的模型训练套路: import torch.optim import torchvision from torch import nn from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterfrom model import *# 1. 准备数据集 train_data torch…

SSM框架学习笔记07 | Spring MVC入门

文章目录 1. HTTP协议2. Spring MVC2.1. 三层架构2.2. MVC(解决表现层的问题)2.3. 核心组件 3. Thymeleaf3.1. 模板引擎3.2. Thymeleaf3.3. 常用语法 代码 1. HTTP协议 网址:https://www.ietf.org/ (官网网址) https:…

dolphinscheduler单机版部署教程

文章目录 前言一、安装准备1. 安装条件2. 安装jdk3. 安装MySQL 二、安装dolphinscheduler1. 下载并解压dolphinscheduler2. 修改配置文件2.1 修改 dolphinscheduler_env.sh 文件2.2 修改 application.yaml 文件 3. 配置mysql数据源3.1 修改MySQL安全策略3.2 查看数据库3.3 创建…

使用Docker部署MinIO并结合内网穿透实现远程访问本地数据

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器,可以在各种环境中运行,例如本地、Docker容器、Kubernetes集群等。它兼…

Pytest教程:一种利用 Python Pytest Hook 机制的软件自动化测试网络数据抓包方法

随着计算机技术的发展,使得网络应用的数量不断增加,因此网络数据抓包成为了网络应用开发和测试中非常重要的一部分。目前,已有许多网络数据抓包工具可供使用,例如 Wireshark、Tcpdump、Fiddler 等,但这些工具需要手动配…

进程的学习

进程基本概念: 1.进程: 程序:存放在外存中的一段数据组成的文件 进程:是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息(根据CPU占用率排序&#xf…

PHY6222系统级SOC蓝牙芯片低功耗高性能蓝牙MESH组网智能家居

简介 PHY6222是一款支持BLE 5.2功能和IEEE 802.15.4通信协议的系统级芯片(SoC),集成了超低功耗的高性能多模射频收发机,搭载32-bit ARM?Cortex?-M0处理器,提供64K retention SRAM、可选128K-8M Flash、96KB ROM以及2…

十、线性代数二-线性相关

目录 1、线性相关的概念: 2、线性相关的代数表示: 3、线性相关的判断方法: 理解:线性相关指的是 向量组(α1,α2,α3,...)的 秩是 小于 k 的元数的,即齐次…

第二节:Vben Admin 登录逻辑梳理和对接后端准备

系列文章目录 上一节:第一节:Vben Admin介绍和初次运行 文章目录 系列文章目录前言项目路径的概述一、登录逻辑梳理loginApi接口查看Mock 二、后端程序对接准备关闭Mock 总结 前言 第一节,我们已经配置了前端环境,运行起来了我们…

文献速递:深度学习--深度学习方法用于帕金森病的脑电图诊断

文献速递:深度学习–深度学习方法用于帕金森病的脑电图诊断 01 文献速递介绍 人类大脑在出生时含有最多的神经细胞,也称为神经元。这些神经细胞无法像我们身体的其他细胞那样自我修复。随着年龄的增长,神经元逐渐死亡,因此变得…

el-form 表单文本标签label增加tooltip提示图标

需求&#xff1a;在el-form表单中&#xff0c;el-form-item的文本标签处增加提示语&#xff1b; 标签&#xff1a;el-form、el-form-item、el-tooltip&#xff1b; 实现&#xff1a; <el-form-item prop"basicScore"><span slot"label"><…

nginx之状态页 日志分割 自定义图表 证书

5.1 网页的状态页 基于nginx 模块 ngx_http_stub_status_module 实现&#xff0c;在编译安装nginx的时候需要添加编译参数 --with-http_stub_status_module&#xff0c;否则配置完成之后监测会是提示语法错误注意: 状态页显示的是整个服务器的状态,而非虚拟主机的状态 server{…

【Git】Git命令的学习与总结

本文实践于 Learn Git Branching 这个有趣的 Git 学习网站。在该网站&#xff0c;可以使用 show command 命令展示所有可用命令。你也可以直接访问网站的sandbox&#xff0c;自由发挥。 一、本地篇 基础篇 git commit git commit将暂存区&#xff08;staging area&#xff…