vue项目中使用postcss-px2rem的方法总结「建议收藏」

vue项目中使用postcss-px2rem的方法总结「建议收藏」标题vue项目中postcss-px2rem的使用在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件如何使用:1.安装npmipostcss-px2rem–save-dev2.设置(以下总结了三种方式)1).找到项目根目录下的.postcssrc文件module.exports={“plugins”:{“postcss-import”:{},”postcss-url”

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

vue项目中使用postcss-px2rem的2种方法

在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.)

如何使用:

1.安装

npm i postcss-px2rem –save -dev

2.设置

1).找到项目根目录下的.postcssrc文件


module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
     },
     'postcss-px2rem':{'remUnit':75}    //配置rem基准值,75是iphone6标准
  }
}

Jetbrains全家桶1年46,售后保障稳定

remUnit: 75 代表 1rem = 75px; 所以当你一个75px值时,它会自动转成 (75px/75)rem,

转化完之后,你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的

html {
    font-size: 10vw;
}

这样的话我们设置的px值 就变成对应的 10%的屏幕宽度 *(75px/75)rem

2) 找到根目录下的vue-loader.conf.js

本人使用的是这种方法.
首先需要设置html的fontsize值,1rem = html的font-size,这里咱们动态设置一下,可以直接在index.html中设置
PC端

(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 设计图尺寸宽 / 100( 设计图的rem = 100 )
        rem = rootWidth / 19.2;
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();

移动端

(function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
    
        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100(设计图的rem = 100)
        scale = 1 / dpr;
    
        // 设置viewport,进行缩放,达到高清效果 (移动端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

vue-loader.conf.js位置

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

const px2rem = require('postcss-px2rem')
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss: function() {
    return [px2rem({remUnit: 100})];
  }
}

修改完成后 记得重新编译
我还写了一篇 移动端自适应px2vw的文章,有需要的可以去看看,希望对你有帮助,多多评论指教.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207472.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java:闰年判断程序[通俗易懂]

    java:闰年判断程序[通俗易懂]公历闰年的简单计算方法(符合以下条件之一的年份即为闰年)1、能被4整除而不能被100整除。2、能被400整除。方案:使用数学运算符取余运算(%),关系运算符等于(==)和不等于(!=),辑运算符逻辑与(&&)和逻辑或(||),来判断某年是否为闰年,判断的结果为boolean类型的值,如果为闰年boolean类型的值为true,否则为falsebooleanflag=(year%4==0&&year%100!=0)||year%400==0

  • python里面requests库(python如何爬取网页数据)

    一、什么是RequestsRequests是⽤Python语⾔编写,基于urllib,采⽤Apache2Licensed开源协议的HTTP库。它⽐urllib更加⽅便,可以节约我们⼤量的⼯作,完全满⾜HTTP测试需求。⼀句话——Python实现的简单易⽤的HTTP库二、安装Requests库进入命令行win+R执行命令:pipinstallrequests…

  • yum 命令讲解「建议收藏」

    yum 命令讲解「建议收藏」(一)yum介绍Yum(全称为YellowdogUpdater,Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。基于RPM包管理,能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无须繁琐地一次次下载、安装。yum提供了查找、安装、删除某一个、一组甚至全部软件包的命令,而且命令简洁而又好记。 …

  • javaint转化为string_java jsonobject转string

    javaint转化为string_java jsonobject转string1、String转化为JsonObject格式的数据。主要代码如下:JsonReaderjsonReader=Json.createReader(newStringReader(str));JsonObjectz =jsonReader.readObject();  //或者 this.jobj=jsonReader.readObject();  例如:有一

  • 使用 Linux 命令行发送邮件

    使用 Linux 命令行发送邮件mailx与sendmail辨析mailx是邮件客户端。人们可以使用它编写邮件,然后把邮件传递给本地的邮件传输服务器。sendmail是邮件服务器。它可以与远端的邮件服务器通信,收发邮件

  • java笔记–Map的用法

    java笔记–Map的用法Map接口概述我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图。 Collection中的集合,元素是孤立存在的(理解为单身),向集合中存储元素采用一个个元素的方式存储。 Map中的集合,元素是成对存在的(理解为夫妻)。每个元素由键与值两部分组成,通过键可以找对所对应的值。 Collectio…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号