postcss-pxtorem实现页面自适应的原理

  1. 先声明一点这玩意本身不能实现哈,他只是一个工具,更是一个postcss的插件 帮助我们从px转化成为rem
  2. 比如我们的代码
div {
	height: 100px;
	width: 100px;
}

经过这个插件转化之后变成
假设变成下面这样哈

div {
	height: 1rem;
	width: 1rem;
}

其他没啥子太大作用

下面请允许我跑题讲讲其他的知识
比如 750的设计稿上 有宽度 375px宽度的元素 那么它就会占用设备宽度的一半
如果这个设计到了 375px的设备上 我们再设置 375px的话 那就会占满整个设备了。

那么问题来了 有没有什么单位 可以让我在这两上面实现同样的效果呢
当然有了。我们直接设置 百分之50不就行了嘛

聪明的boy,但是今天不说这个百分比宽度 也不说那个视口宽度单位
今天讲rem这个单位
rem 是 CSS 中的一个长度单位,全称是 “root em”。它是相对于根元素(即HTML元素)的字体大小来计算的。例如,如果 HTML 元素的字体大小是 16px,那么 1rem 就等于 16px。如果 HTML 元素的字体大小改变,那么使用 rem 作为单位的元素的大小也会相应地改变。

看了上面介绍 我在想 我们可不可以这样做
在750px设计稿上 设置一个 1rem宽度的元素。跑到375px上面也是1rem但是他俩的展示效果是一样的

举个例子哈 750上面 假设 1rem = 100px
那么要想实现同样的效果那么 我们在 375设备上 就需要 1rem = 50px

这个怎么做到呢 我们就通过调整 根元素的字体大小来来实现

在750设备上

htmlDom.style.fontSize = 100 + 'px'

在 375设备上

htmlDom.style.fontSize = 50 + 'px'

有童鞋会有疑问 那么我其他的设备 怎么办 总不能一个设备写一个这个吧
嘿嘿 这样就需要引入一个 比例了 我们固定好一个比例 根据我们设计稿的宽度尺寸
比如是 750的 那么scale比例就是

假设 100px = 1rem 那么 750px 就是 7.5rem了

 const scale = 750 / 100
 console.log(scale) // 输出 7.5

这样话 在375的设备上就是

// 输出 50px

htmlDom.style.fontSize = 375 / 7.5 + 'px' 

如果设备宽度是 420,那么

htmlDom.style.fontSize = 420 / 7.5 + 'px' = '56px'

上面其实我们可以提取出来一个专门处理的函数

// 按照设计稿 375px计算  1rem 16px 那么 如果设备是750px的话 那么 1rem就是 32px
        function setRem(designWidth = 750) {
            const scale = designWidth / 100
            const htmlDom = document.querySelector('html')
            const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
            htmlDom.style.fontSize = htmlWidth / scale + 'px'
        }
        window.onload = function() {
            setRem()
        }
        window.onresize = function() {
            setRem()
        }

重新回到我们的postcss-pxtorem哈 我们在设计的时候总不能自己一直在哪里算吧 如果,比如 设计稿宽度 20px 我们还需要自己去手写或者计算多少rem 多费时间啊
那么有没有一个插件 我们可以自己手写px它自动根据我们设置的给转化成rem这样多爽
那么它来了
怎么用呢。和webpack一样需要我们安装一些东西哈
首先在我们的html文件目录下 (我这个可不是基于webpack哈)

npm init -y
npm i postcss postcss-cli -D
npm i postcss-pxtorem -S

然后在package.json同级别目录下创建一个 postcss.config.js

module.exports = {
    plugins: [
      require('postcss-pxtorem')({
        rootValue: 100,
        propList: ['*'],
        minPixelValue: 2 // 设置最小的转换数值,如果为1的话,只有2px以上的值才会被转换
      }),
      // 其他插件...
    ],
  };

在package.json文件配置下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss src/style.css -o dist/style.css"
  },

运行 npm run build
在src/style.css

div {
    height: 200px;
    width: 200px;
    background-color: #f00;
}
div p {
    height: 1px;
    width:  1px;
}

看下效果哈
在这里插入图片描述
是不是转化成功了 嘿嘿
关注我 持续更新 前端知识

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GateWay网关介绍以及整合knife4j聚合所有服务的接口文档

为什么使用网关? 因为多个微服务的端口不同,前端调用不方便,使用网关可以统一接收处理前端的请求,同时方便接口的集中处理,比如鉴权、聚合接口文档、限流等等.. 这里使用Knife4j文档工具来实现接口文档:K…

【分布式微服务专题】从单体到分布式(二、SpringCloud整合Nacos)

目录 前言阅读对象阅读导航前置知识笔记正文一、下载安装二、项目整合2.1 服务注册与发现2.2 动态配置管理 三、其他实验四、服务之间的调用 学习总结感谢 前言 本篇笔记主要是记录我整合Nacos项目进来的过程。以实现服务注册发现,以及分布式配置管理。关于Nacos&a…

hive数据库查看参数/hive查看当前环境配置

文章目录 一、hive查看当前环境配置命令 在一次hive数据库执行命令 set ngmr.exec.modecluster时,想看一下 ngmr.exec.mode参数原先的值是什么,所以写一下本篇博文,讲一下怎么查看hive中的参数。 一、hive查看当前环境配置命令 set &#…

06 硬件知识入门(MOSS管)

1 简介 MOS管和三极管的驱动方式完全不一样,以NPN型三极管为例,base极以小电流打开三极管,此时三极管的集电极被打开,发射极的高电压会导入,此时电流:Ic IbIe ;电压:Ue>Uc>Ub…

DBSCAN算法原理及其Python实现

文章目录 原理Python实现验证 原理 DBSCAN,即Density-Based Spatial Clustering of Applications with Noise,基于密度的噪声应用空间聚类。 在DBSCAN算法中,将数据点分为三类: 核心点:若样本 x i x_i xi​的 ε \v…

《深入理解计算机系统》学习笔记 - 第三课 - 浮点数

Floating Point 浮点数 文章目录 Floating Point 浮点数分数二进制示例能代表的数浮点数的表示方式浮点数编码规格化值规格化值编码示例 非规格化的值特殊值 示例IEEE 编码的一些特殊属性四舍五入,相加,相乘四舍五入四舍五入的模式二进制数的四舍五入 浮…

Linux 网络协议

1 网络基础 1.1 网络概念 网络是一组计算机或者网络设备通过有形的线缆或者无形的媒介如无线,连接起来,按照一定的规则,进行通讯的集合( 缺一不可 )。 5G的来临以及IPv6的不断普及,能够进行联网的设备将会是越来越多&#xff08…

扩展学习|商务智能与社会计算

一、概念介绍 (一)商务智能 商务智能(Business Intelligence,简称BI)是一种基于数据分析的决策支持系统,旨在帮助企业或组织更好地理解和利用自身数据,发现其中的模式和趋势,并提供…

Java物联网项目源码

Java物联网项目源码 使用技术:JAVA [ springmvc / spring / mybatis ] 、Mysql 、Html 、Jquery 、css 协议和优势:TCP/IP、HTTP、MQTT 通讯协议。 系统包括:后台服务,传感器解析服务、web展示; 目前web系统支持功…

【Proteus仿真】【STM32单片机】蓝牙遥控小车

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器,使LCD1602液晶,L298电机,直流电机,HC05/06蓝牙模块等。 主要功能: 系统运行后,LCD1602显…

基于springboot实现的仿天猫商城项目

一、系统架构 前端:jsp | js | css | jquery 后端:springboot | mybatis-plus 环境:jdk1.7 | mysql | maven 二、代码及数据库 三、功能介绍 01. web端-首页 02. web端-商品查询 03. web端-商品详情 04. web端-购物车 05. web端-订单…

YOLOv8改进 | 2023 | DiverseBranchBlock多元分支模块(有效涨点)

一、本文介绍 本文带来的改进机制是YOLOv8模型与多元分支模块(Diverse Branch Block)的结合,Diverse Branch Block (DBB) 是一种用于增强卷积神经网络性能的结构重新参数化技术。这种技术的核心在于结合多样化的分支,这些分支具有…

C++ day57 回文子串 最长回文子串序列

题目1:647 回文子串 题目链接:回文子串 对题目的理解 返回字符串s中回文子串的个数,字符串s至少包含一个字符,且仅由小写字母组成。 动态规划 动规五部曲 1)dp数组及下标i的含义 dp[i][j]:[i,j]子串…

22款奔驰S450L升级主动式环境氛围灯 安全提醒功能

主动式氛围灯有263个可多色渐变的LED光源,营造出全情沉浸的动态光影氛围。结合智能驾驶辅助系统,可在转向或检测到危险时,予以红色环境光提示,令光影艺术彰显智能魅力。配件有6个氛围灯,1个电脑模块。星骏汇小许Xjh158…

第二十一章——网络通信总结

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信,必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称,是一种网络协议。Internet 网络采用的协议是TCP/IP协议,其全称是Transmission…

第21章网络通信

Internet 提供了大量有用的信息,很少有人能在接触过Internet后拒绝它的诱惑。计算机网络实现了多台计算机间的互联,使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序,这些程序借助于网络协议&#xff0c…

Python编程技巧 – 异常处理

Python编程技巧 – 异常处理 Python Programming Skills – Exception Handling By JacksonML 每一个程序都未必是健壮的,有时候很脆弱。只有在人的理想思维状况下,返回的结果才是正确的,如意的。 1. 错误发生及异常输出 面对种种编写有疏…

【mysql】下一行减去上一行数据、自增序列场景应用

背景 想获取if_yc为1连续账期数据 思路 获取所有if_yc为1的账期数据下一行减去上一行账期,如果为1则为连续,不等于1就为断档获取不等于1的最小账期,就是离当前账期最近连续账期 代码 以下为mysql语法: select acct_month f…

机场信息集成系统系列介绍(1)

机场信息集成系统是一种专为机场运营管理设计的先进系统,旨在提高机场的航班调度指挥效率,同时为机场各生产部门提供航班保障计划的制定和实时调整功能。 该系统的核心用户是机场运控部门,他们利用系统进行航班运行指挥,通过采集航…

Kafka性能调优:高吞吐、低延迟的数据流

Apache Kafka作为一种高性能、分布式流处理平台,对于实时数据的处理至关重要。本文将深入讨论Kafka性能调优的关键策略和技术,通过丰富的示例代码为大家提供实际操作指南,以构建高吞吐、低延迟的数据流系统。 Broker 配置的优化 首先&#…