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 = 12
            rootValue: 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解决大屏适配问题

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

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

相关文章

Go invalid memory address or nil pointer dereference错误 空指针问题

Go invalid memory address or nil pointer dereference错误 空指针问题

Go 指针声明后赋值&#xff0c;出现 panic: runtime error: invalid memory address or nil pointer dereference&#xff0c;这种是内存地址错误。 首先我们要了解指针&#xff0c;指针地址在 Go 中 * 代表取指针地址中存的值&#xff0c;& 代表取一个值的地址对于指针&am…
阅读更多...
JVM 各个参数详解

JVM 各个参数详解

在一些规模稍大的应用中&#xff0c;Java虚拟机&#xff08;JVM&#xff09;的内存设置尤为重要&#xff0c;想在项目中取得好的效率&#xff0c;GC&#xff08;垃圾回收&#xff09;的设置是第一步。 PermGen space&#xff1a;全称是Permanent Generation space.就是说是永久…
阅读更多...
PDF文件解析

PDF文件解析

一、PDF文件介绍 PDF是英文Portable Document Format缩写&#xff0c;就是可移植的意思&#xff0c;它是以PostScript语言图象模型为基础&#xff0c;无论在哪种打印机上都可保证精确的颜色和准确的打印效果&#xff0c;PostScript咱也不懂&#xff0c;估计和SVG的原理差不多吧…
阅读更多...
k8s提交spark应用消费kafka数据写入elasticsearch7

k8s提交spark应用消费kafka数据写入elasticsearch7

一、k8s集群环境 k8s 1.23版本&#xff0c;三个节点&#xff0c;容器运行时使用docker。 spark版本时3.3.3 k8s部署单节点的zookeeper、kafka、elasticsearch7 二、spark源码 https://download.csdn.net/download/TT1024167802/88509398 命令行提交方式 /opt/module/spark…
阅读更多...
14：00面试，14：06就出来了，问的问题有点变态。。。。。。

14：00面试，14：06就出来了，问的问题有点变态。。。。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…
阅读更多...
pytorch3D Windows下安装经验总结

pytorch3D Windows下安装经验总结

一、说明及准备工作 最近在安装pytorch3D的时候遇到了很多问题&#xff0c;查了很多博客&#xff0c;但发现讲的都不太全&#xff0c;所以特将自己的及收集到的安装过程经验总结如下。我是在Anaconda中虚拟环境下安装的。 1.1准备工作 官方安装教程如下&#xff1a;https://…
阅读更多...
Docker Tomcat 搭建文件服务器

Docker Tomcat 搭建文件服务器

本文基于openwrt上进行。 步骤 1: 安装 Docker 如果尚未安装Docker&#xff0c;首先需要安装Docker。根据你的操作系统&#xff0c;参考Docker官方文档来完成安装, 这里不做详细介绍。 步骤 2: 拉去docker Tomcat镜像 进入openwrt管理界面&#xff0c;docker选项中 拉取最新…
阅读更多...
Java 设计模式——外观模式

Java 设计模式——外观模式

目录 1.概述2.结构3.实现3.1.子系统类3.2.外观类3.3.测试 4.优缺点5.使用场景6.源码解析 1.概述 &#xff08;1&#xff09;有些人可能炒过股票&#xff0c;但其实大部分人都不太懂&#xff0c;这种没有足够了解证券知识的情况下做股票是很容易亏钱的&#xff0c;刚开始炒股肯…
阅读更多...
Zeus IoT : 基于 SpringBoot 的分布式开源物联网大数据平台

Zeus IoT : 基于 SpringBoot 的分布式开源物联网大数据平台

Zeus IoT 是一个集设备数据采集、存储、分析、观测为一体的开源物联网平台&#xff0c;全球首创基于 Zabbix 的物联网分布式数据采集架构&#xff0c;具备超百万级物联网设备的并发监控能力&#xff0c;真正具备工业级性能与稳定性的开源物联网大数据中台。 Zeus IoT 致力于让设…
阅读更多...
Zinx框架-游戏服务器开发002：框架学习-按照三层结构模式重构测试代码+Tcp数据适配+时间轮定时器

Zinx框架-游戏服务器开发002：框架学习-按照三层结构模式重构测试代码+Tcp数据适配+时间轮定时器

文章目录 1 Zinx框架总览2 三层模式的分析3 三层重构原有的功能 - 头文件3.1 通道层Stdin和Stdout类3.1.2 StdInChannel3.1.2 StdOutChannel 3.2 协议层CmdCheck和CmdMsg类3.2.1 CmdCheck单例模式3.2.1.1 单例模式3.2.1.2 * 命令识别类向业务层不同类别做分发 3.2.2 CmdMsg自定…
阅读更多...
Node.js |（五）包管理工具 | 尚硅谷2023版Node.js零基础视频教程

Node.js |（五）包管理工具 | 尚硅谷2023版Node.js零基础视频教程

学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程&#xff0c;nodejs新手到高手 文章目录 &#x1f4da;概念介绍&#x1f4da;npm&#x1f407;安装npm&#x1f407;基本使用&#x1f407;生产依赖与开发依赖&#x1f407;npm全局安装&#x1f407;npm安装指定包和删除…
阅读更多...
4、Python基本数据类型：数字、字符串、列表、元组、集合、字典

4、Python基本数据类型：数字、字符串、列表、元组、集合、字典

文章目录 1、Python基本数据类型简介2、数字3、字符串4、列表5、元组6、集合7、字典1、Python基本数据类型简介 Python是一种非常强大且易于学习的编程语言，它具有简洁的语法和丰富的数据类型。了解和掌握Python的基本数据类型是学习和使用Python的基础。本文将详细介绍Pytho…
阅读更多...
Disk Drill v5.3.1313(数据恢复备份)

Disk Drill v5.3.1313(数据恢复备份)

Disk Drill是一款功能强大的数据恢复软件&#xff0c;它可以帮助用户恢复已删除、丢失、格式化或损坏的文件&#xff0c;并支持多种存储设备&#xff0c;包括计算机硬盘驱动器、外部硬盘、USB闪存驱动器、内存卡和其他存储介质。它和很多的文件系统都兼容&#xff0c;比如&…
阅读更多...
nodejs express uniapp 图书借阅管理系统源码

nodejs express uniapp 图书借阅管理系统源码

开发环境及工具&#xff1a; nodejs&#xff0c;mysql5.7&#xff0c;HBuilder X&#xff0c;vscode&#xff08;webstorm&#xff09; 技术说明&#xff1a; nodejs express vue elementui uniapp 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示轮播图&am…
阅读更多...
排序算法的分析及实现

排序算法的分析及实现

目录​​​​​​​ 1. 排序 1.1. 排序的概念 1.2. 排序的稳定性 1.3. 内部排序和外部排序 2. 直接插入排序 2.1. 直接插入排序 2.2. 直接插入排序的两种情况 1. 情况一 2. 情况二 2.3. 直接插入排序的单趟排序 2.4. 直接插入排序的完整实现 2.5. 直接插入排序的时…
阅读更多...
【江协科技-用0.96寸OLED播放知名艺人打篮球视频】

【江协科技-用0.96寸OLED播放知名艺人打篮球视频】

Python进行视频图像处理&#xff0c;通过串口发送给stm32&#xff0c;stm32接收数据&#xff0c;刷新OLED进行显示。 步骤&#xff1a; 1.按照接线图连接好硬件 2.把Keil工程的代码下载到STM32中 3.运行Python代码&#xff0c;通过串口把处理后的数据发送给STM32进行显示 …
阅读更多...
【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解

【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解

【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】AlexNet模型算法详解前言AlexNet讲解卷积层的作用卷积过程特征图的大小计算公式Dropout的作用AlexNet模型结构 AlexNet Pytorch代码完整代码总结 前言 AlexNet是…
阅读更多...
论文阅读——What Can Human Sketches Do for Object Detection？(cvpr2023)

论文阅读——What Can Human Sketches Do for Object Detection？(cvpr2023)

论文&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/papers/Chowdhury_What_Can_Human_Sketches_Do_for_Object_Detection_CVPR_2023_paper.pdf 代码&#xff1a;What Can Human Sketches Do for Object Detection? (pinakinathc.me) 一、 Baseline SBIR Fram…
阅读更多...
Cesium:WFS请求两种方式

Cesium:WFS请求两种方式

以本地发布的上海市浦东区行政区划WMS地图服务为例，讲述Cesium中WFS请求的两种方式及其优缺点。 服务加载地址及其参数如下， 服务加载地址：http://localhost:8089/geoserver/pudong/wms 加载参数：layerName:pudong:distractservice: "WMS",request: "GetMa…
阅读更多...
8-2、T型加减速计算简化【51单片机控制步进电机-TB6600系列】

8-2、T型加减速计算简化【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;本节介绍简化T型加减速计算过程&#xff0c;使其适用于单片机数据处理。简化内容包括浮点数转整型数计算、加减速对称处理、预处理计算 一、浮点数转整型数计算 1.1简化∆t_1计算 根据上一节内容已知 K0.676 step1.8/X&#xff08;x为细分值&#xff0c;1.8对…
阅读更多...
最新文章

Copyright @ 2022~2023