PostCSS通过px2rem插件和lib-flexible将px单位转换为rem(root em)单位实现大屏适配

目录

    • 文档
    • postcss中使用postcss-plugin-px2rem
      • 安装postcss-plugin-px2rem
      • 示例
      • 默认配置
    • webpack中使用postcss-plugin-px2rem
      • 项目结构
      • 安装依赖
      • 文件内容
    • 大屏适配
    • 参考文章

文档

类似的插件

  • postcss-plugin-px2rem

    • https://www.npmjs.com/package/postcss-plugin-px2rem
    • https://github.com/pigcan/postcss-plugin-px2rem

  • postcss-pxtorem

    • https://www.npmjs.com/package/postcss-pxtorem
    • https://github.com/cuth/postcss-pxtorem

  • postcss-px2rem

    • https://www.npmjs.com/package/postcss-px2rem

amfe-flexible
lib-flexible

postcss中使用postcss-plugin-px2rem

安装postcss-plugin-px2rem

pnpm install postcss postcss-plugin-px2rem --save-dev

依赖 package.json

{"type": "module","dependencies": {"postcss": "^8.4.31","postcss-plugin-px2rem": "^0.8.1"}
}

示例

main.js

import { writeFileSync, readFileSync } from "fs";
import postcss from "postcss";
import pxtorem from "postcss-plugin-px2rem";const css = readFileSync("./style.css", "utf8");// 修改默认配置
const options = {};const processedCss = postcss(pxtorem(options)).process(css).css;writeFileSync("./style.rem.css", processedCss);

输入 style.css

h1 {margin: 0 0 20px;font-size: 32px;line-height: 1.2;letter-spacing: 1PX; /* ignored */
}

输出 style.rem.css

h1 {margin: 0 0 0.2rem;font-size: 0.32rem;line-height: 1.2;letter-spacing: 1PX;
}

默认配置

{rootValue: 100,unitPrecision: 5,propWhiteList: [],propBlackList: [],exclude:false,selectorBlackList: [],ignoreIdentifier: false,replace: true,mediaQuery: false,minPixelValue: 0
}

webpack中使用postcss-plugin-px2rem

项目结构

$ tree -I node_modules
.
├── package.json
├── src
│   ├── index.js
│   └── style.css
└── webpack.config.cjs

安装依赖

pnpm install webpack webpack-cli style-loader css-loader postcss-loader mini-css-extract-plugin --save-dev

完整依赖 package.json

{"type": "module","scripts": {"build": "webpack"},"devDependencies": {"css-loader": "^6.8.1","mini-css-extract-plugin": "^2.7.6","postcss": "^8.4.31","postcss-loader": "^7.3.3","postcss-plugin-px2rem": "^0.8.1","style-loader": "^3.3.3","webpack": "^5.89.0","webpack-cli": "^5.1.4"}
}

文件内容

webpack.config.cjs

"use strict";const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {// 生产环境mode: "production",// 打包入口entry: {index: "./src/index.js",},// 指定输出地址及打包出来的文件名output: {path: path.join(__dirname, "dist"),filename: "index.js",},module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: [["postcss-plugin-px2rem",// 配置参数{rootValue: 100,},],],},},},],},],},plugins: [// 将 CSS 提取到单独的文件中new MiniCssExtractPlugin(),],
};

入口文件 index.js

import "./style.css";

样式文件 style.css

h1 {margin: 0 0 20px;font-size: 32px;line-height: 1.2;letter-spacing: 1PX; /* ignored */
}

运行打包

$ npm run build

输出结果

h1 {margin: 0 0 0.2rem;font-size: 0.32rem;line-height: 1.2;letter-spacing: 1PX; /* ignored */
}

大屏适配

原理

  • 打包阶段：根据设计稿的尺寸编写css代码（px为单位），将css代码转为rem为单位的数据
  • 浏览器运行阶段：根据根节点root的字体大小，将rem为单位的尺寸还原为px单位

引入文件：lib-flexible.js

因为lib-flexible.js 原本是用来适配移动端的，所以，需要改动一些代码才能适配PC大屏，只能通过整个文件引入，不要通过npm安装，否则每次安装都需要重新修改代码

需要改动的代码如下

function refreshRem() {var width = docEl.getBoundingClientRect().width;// 适配移动端// if (width / dpr > 540) {//   width = 540 * dpr;// }// 适配PC端// 最小宽度1200px// if (width / dpr < 1200) {//   width = 1200 * dpr;// }// 根据这个值计算postcss-plugin-px2rem的配置参数 rootValue// 设置px->rem的比例是：100// var rem = width / 10;var rem = width / 100;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}

这里可以设置一个最小宽度，配置页面也设置一个最小宽度，避免屏幕过小而变形

body{min-width: 1200px;
}

完整代码

/*** lib-flexible* Version 0.3.2* https://www.npmjs.com/package/lib-flexible?activeTab=code*/
(function (win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {console.warn("将根据已有的meta标签来设置缩放比例");var match = metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute("content");if (content) {var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute("data-dpr", dpr);if (!metaEl) {metaEl = doc.createElement("meta");metaEl.setAttribute("name", "viewport");metaEl.setAttribute("content","initial-scale=" +scale +", maximum-scale=" +scale +", minimum-scale=" +scale +", user-scalable=no");if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement("div");wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem() {var width = docEl.getBoundingClientRect().width;// 适配移动端// if (width / dpr > 540) {//   width = 540 * dpr;// }// 适配PC端// 最小宽度1200px// if (width / dpr < 1200) {//   width = 1200 * dpr;// }// 根据这个值计算postcss-plugin-px2rem的配置参数 rootValue// 设置px->rem的比例是：100// var rem = width / 10;var rem = width / 100;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}win.addEventListener("resize",function () {clearTimeout(tid);tid = setTimeout(refreshRem, 300);},false);win.addEventListener("pageshow",function (e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}},false);if (doc.readyState === "complete") {doc.body.style.fontSize = 12 * dpr + "px";} else {doc.addEventListener("DOMContentLoaded",function (e) {doc.body.style.fontSize = 12 * dpr + "px";},false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function (d) {var val = parseFloat(d) * this.rem;if (typeof d === "string" && d.match(/rem$/)) {val += "px";}return val;};flexible.px2rem = function (d) {var val = parseFloat(d) / this.rem;if (typeof d === "string" && d.match(/px$/)) {val += "rem";}return val;};
})(window, window["lib"] || (window["lib"] = {}));

webpack参数设置

{loader: "postcss-loader",options: {postcssOptions: {plugins: [["postcss-plugin-px2rem",// 配置参数{// 假设设计稿是1200px, px->rem的比例是：100// 1200 / 100 = 12rootValue: 12,},],],},},
},

比如：

设计稿尺寸为1200px

.box {width: 300px;height: 100px;background-color: green;font-size: 32px;line-height: 1.2;letter-spacing: 1px; /* ignored */
}

转换结果是

.box {width: 25rem;height: 8.33333rem;background-color: green;font-size: 2.66667rem;line-height: 1.2;letter-spacing: 0.08333rem; /* ignored */
}

在尺寸为1200px的屏幕宽度下，可以还原为代码中设置的尺寸

width: 25rem + 12px =  300px

在这里插入图片描述

在尺寸为1400px的屏幕宽度下，可以还原为代码中设置的尺寸

width: 25rem + 14px =  350px

在这里插入图片描述
这样，在不同的屏幕下，计算出来的根元素font-size就不一样，进而导致页面元素的尺寸也不一样，实现了缩放效果

需要注意的是，这个缩放是基于宽度缩放的，如果屏幕尺寸比例不一致，会导致竖向的内容会缺失，或者出现滚动

完整代码：https://github.com/mouday/webpack-lib-flexible

参考文章

  1. https://webpack.docschina.org/plugins/mini-css-extract-plugin
  2. https://webpack.docschina.org/loaders/postcss-loader/
  3. 使用lib-flexible和postcss-pxtorem解决大屏适配问题

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

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

相关文章

Docker容器技术实战4

Docker容器技术实战4

11、docker安全 proc未被隔离&#xff0c;所以在容器内和宿主机上看到的东西是一样的 容器资源控制 cpu资源限制 top命令&#xff0c;查看cpu使用率 ctrlpq防止退出回收&#xff0c;容器会直接调用cgroup&#xff0c;自动创建容器id的目录 cpu优先级设定 测试时只保留一个cpu…
阅读更多...
翻页电子杂志制作功略，快收藏，保管好用！

翻页电子杂志制作功略，快收藏，保管好用！

翻页电子杂志&#xff0c;我相信这对大家很熟悉吧&#xff0c;大家也都经常看电子杂志吧。它和我们的生活紧密相关&#xff0c;也极大地改变了我们的阅读方式。听到这“翻页电子杂志”&#xff0c;是不是觉得制作起来肯定很难很复杂&#xff0c;需要专业的人才能制作呢&#xf…
阅读更多...
51单片机汇编-点亮一个led

51单片机汇编-点亮一个led

文章目录 前言1.打开IDE2.设置编辑器3.设置输出4. 原理图5.编写代码6 编译7.下载8.其它代码1.LED闪烁2.跑马灯 前言 51单片机基础 本章主要介绍打开一个led,具体采用51汇编 1.打开IDE 选择STC89C52RC 后缀是.asm 2.设置编辑器 3.设置输出 4. 原理图 5.编写代码 ORG 00H;伪代…
阅读更多...
「视频编码软件」Media Encoder(Me) 2024 Mac/win中文版下载安装

「视频编码软件」Media Encoder(Me) 2024 Mac/win中文版下载安装

Adobe Media Encoder(Me) 2024是一款专业的视频编码工具&#xff0c;它可以将各种视频格式进行转换、压缩和编码&#xff0c;以满足不同媒体平台和设备的需求。 以下是 Media Encoder 2023 的主要功能和新增功能&#xff1a; 视频编码和转换&#xff1a;支持将各种视频格式进…
阅读更多...
python脚本-网页爬虫获取网页图片

python脚本-网页爬虫获取网页图片

python脚本-网页爬虫获取网页图片 代码 import requests import re import time url"http://10.9.47.154/python-spider/" # 爬取网站的url headers {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like …
阅读更多...
arcgis pro模型构建器

arcgis pro模型构建器

如果你不想部署代码包环境来写arcpy代码&#xff0c;还想实现批量或便携封装的操作工具&#xff0c;那么使用模型构建器是最好的选择。1.简介模型构建器 1.1双击打开模型构建器 1.2简单模型构建步骤 先梳理整个操作流程&#xff0c;在纸上绘制在工具箱中找到所需工具拖进来把…
阅读更多...
C++初阶（八）类和对象

C++初阶（八）类和对象

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、Static成员1、Static概念2、Static特性3、试题 二、友元1、友元的类型2、友元函数3、 友元…
阅读更多...
strongswan：configure: error: OpenSSL Crypto library not found

strongswan：configure: error: OpenSSL Crypto library not found

引子 在配置strongswan时&#xff0c;有时会遇到以下错误&#xff08;其实所有需要openssl的软件configure时都有可能遇到该问题&#xff09;&#xff1a; configure: error: OpenSSL Crypto library not found 解决方法 crypto是什么呢? 是OpenSSL 加密库(lib), 这个库需要op…
阅读更多...
Linux多值判断利用case...esac判断

Linux多值判断利用case...esac判断

利用这个判断&#xff0c;一定要注意格式的运用&#xff0c;非常容易出错 case $1 in #判断变量的值 "hello") #双引号注意&#xff0c;右括号 echo " afdbab " #语句段&#xff0c;没啥说的 ;; #两个分号结束第一个判断&#xff0c…
阅读更多...
持续进化，快速转录，Faster-Whisper对视频进行双语字幕转录实践(Python3.10)

持续进化，快速转录，Faster-Whisper对视频进行双语字幕转录实践(Python3.10)

Faster-Whisper是Whisper开源后的第三方进化版本&#xff0c;它对原始的 Whisper 模型结构进行了改进和优化。这包括减少模型的层数、减少参数量、简化模型结构等&#xff0c;从而减少了计算量和内存消耗&#xff0c;提高了推理速度&#xff0c;与此同时&#xff0c;Faster-Whi…
阅读更多...
【LeetCode】第 370 场周赛

【LeetCode】第 370 场周赛

100115. 找到冠军 I 一场比赛中共有 n 支队伍&#xff0c;按从 0 到 n - 1 编号。 给你一个下标从 0 开始、大小为 n * n 的二维布尔矩阵 grid 。对于满足 0 < i, j < n - 1 且 i ! j 的所有 i, j &#xff1a;如果 grid[i][j] 1&#xff0c;那么 i 队比 j 队 强 &…
阅读更多...
带斜杠的能读出来，不带斜杠的读不出来，为什么？

带斜杠的能读出来，不带斜杠的读不出来，为什么？

能读出来。 读不出来&#xff0c;为什么呢&#xff1f;
阅读更多...
数据处理中的中心化

数据处理中的中心化

数据处理中的中心化&#xff0c;就是将原数据减去平均值&#xff0c;得到新的数据&#xff0c;新的数据的平均值为0。 假设原数据是x&#xff08;x可以是多维的&#xff09;&#xff0c;其平均值是&#xff0c;新的数据&#xff0c;那么新数据的平均值是为0的。下面证明下&…
阅读更多...
计算机报错找不到msvcp110.dll无法继续执行代码怎么解决？

计算机报错找不到msvcp110.dll无法继续执行代码怎么解决？

msvcp110.dll文件丢失是一个相当常见的问题&#xff0c;尤其是在运行某些程序或游戏时。这个问题可能会导致程序无法正常运行&#xff0c;甚至可能导致系统崩溃。那么&#xff0c;面对这样的问题&#xff0c;我们应该如何来解决呢&#xff1f;下面&#xff0c;我将分享我解决问…
阅读更多...
【C/C++】C++中重载、重写和隐藏的区别

【C/C++】C++中重载、重写和隐藏的区别

重载 函数重载满足条件&#xff1a; 同一个作用域下函数名称相同函数参数类型不同 或者 个数不同 或者 顺序不同 注意: 函数的返回值不可以作为函数重载的条件。 #include<bits/stdc.h>using namespace std;class A {void fun() {};void fun(int i) {};void fun(int …
阅读更多...
Qt OpenGL相机系统

Qt OpenGL相机系统

文章目录 一、简介二、实现代码三、实现效果参考资料效果展示 一、简介 一直偷懒没有学习OpenGL，乘着这段有点时间重新学习一下OpenGL，做一个简单的小工具，有助于后面理解OSG。我们都知道OpenGL中存在着下面几个坐标空间：模型空间（物体空间）、世界空间、观察空间(或者称…
阅读更多...
基于单片机的智能拐杖软件设计

基于单片机的智能拐杖软件设计

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、整体设计方案2.1本设计设计原理2.1.1单片机基本介绍 二、本设计方案选择三、软件设计AD原理图&#xff1a;原理图…
阅读更多...
阿里云多款ECS产品全面升级 性能最多提升40%

阿里云多款ECS产品全面升级 性能最多提升40%

“阿里云始终围绕‘稳定、安全、性能、成本、弹性’的目标不断创新&#xff0c;为客户创造业务价值。”10月31日&#xff0c;杭州云栖大会上&#xff0c;阿里云弹性计算计算产品线负责人张献涛表示&#xff0c;通过持续的产品和技术创新&#xff0c;阿里云发布了HPC优化实例等多…
阅读更多...
【线性代数】分块矩阵总结

【线性代数】分块矩阵总结

阅读更多...
基于Magma构建灵活、低成本无线接入网

基于Magma构建灵活、低成本无线接入网

传统蜂窝网络一般基于特定接入技术并针对大规模公共网络设计&#xff0c;无法灵活适配小规模网络以及异构无线技术。本文介绍了Magma在构建低成本异构无线接入方面的探索。原文: Building Flexible, Low-Cost Wireless Access Networks With Magma 摘要 当今仍然有数十亿人受限…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023