vue-cli 3.0 搭建vue 2.0中使用postcss-pxtorem适配方案

最新推荐文章于 2025-03-06 18:08:14 发布

原创

最新推荐文章于 2025-03-06 18:08:14 发布 · 660 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #postcss

本文介绍了如何在vue-cli 3.0构建的vue 2.0项目中，通过postcss-pxtorem实现px到rem的转换，以达到移动端适配的目的。详细步骤包括安装、配置postcss.config.js、创建rem.js并引入到main.js中。

提示：用vue-cli 3.0搭建的vue 2.0项目中使用prostcss prostcss-pxtorem px转rem 使用vant

文章目录

一、安装
二、创建postcss.config.js
三、创建rem.js
四、在main.js中引入rem.js

一、安装

npm install postcss-pxtorem --save

二、创建postcss.config.js

在根目录新建postcss.config.js文件，内容如下

module.exports = {
   
   
    plugins: {
   
   
        'postcss-pxtorem': {
   
   
            rootValue: 37.5, // 已设计稿宽度375px为例 vant用的是375的设计稿
            propList

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

戳戳_Emma

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

前端向朔

12-13

4178

背景前段时间，我由重构/UI开发转岗前端开发，之前直接在重构自己的目录下输出静态CSS样式和HTML，现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发，这就需要在现有前端开发流程中整合重构流程。我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发，比如样式自动补全（配置浏览器兼容参数）autoprefixer、HTML 文件引入 gulp-file...

Vue中rem与postcss-pxtorem的应用详解

10-15

主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

参与评论您还未登录，请先登录后发表或查看评论

VUE2使用postcss-pxtorem

weixin_53363875的博客

01-05

2642

VUE2使用postcss-pxtorem

vue2 postcss-pxtorem插件px转rem

wsdf222的博客

04-24

812

2项目中在src同路径下创建一个.postcssrc.js 的文件，配置如下，如果需要跟多功能可以百度一下 postcss-pxtorem插件的配置，在这里就不多赘述了。配置完成后重启一下项目就可以进行px转rem了，本人在2024.4.24日项目亲测可用。1安装postcss-pxtorem，这里指定的是5.1.1版本。

vue3/vue2页面元素尺寸自适应实现(postcss-pxtorem)

少点bug，多点bag。

04-07

2923

自适应实现(postcss-pxtorem)；针对vue3+vite（支持ts）、使用webpack的vue3、vue2项目；报错解决：PostCSS plugin postcss-pxtorem requires PostCSS 8；当pc端或移动端H5等项目中需要根据当前浏览器窗口或屏幕尺寸来自适应的改变页面内元素尺寸时适用

vue中的适配：px2rem

weixin_33858336的博客

11-19

228

这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中：import 'lib-flexible/flexible'2.引入px2rem-loader cnpm install --sa...

vue3.0中使用postcss-pxtorem的具体方法

10-15

在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...

关于vue利用postcss-pxtorem进行移动端适配的问题

10-15

主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

11-21

本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...

vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配

全栈羊的搬砖日常

12-11

1万+

/ 配置基本大小// 设置 rem 函数//当前页面宽度相对于1920px屏幕宽的缩放比例，可根据自己需要修改。//设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）setRem();//初始化// 适配 - 重置函数setRem();// 全局可调用(其他方式也可)// 改变窗口大小时重置 remsetRem()适配的方法总体分为两步:px转换成remrem根据屏幕大小重置基数改变大小。

vue中postcss的使用

babing8893的博客

04-28

601

既然要用到postcss我们就需要在项目中先引入postcss-loader,这时候修改utils.js下的postcss: generateLoaders(‘css’) 括号里添加css 然后在build下新建postcss.conf.js,添加以下代码: exports.postfactory = function (opts) { // console.log...

vue2项目postcss.config.js配置，将px转化成rem

jiangzhihao0515的博客

10-20

2826

方案一、在项目根目录下创建 postcss.config.js。方案二、在vue.config.js单独配置。方案三、在package.json单独配置。配置：如下有三种不同方案进行配置。

vue-自适应布局-postcss-pxtorem

m0_65039133的博客

05-20

5228

它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。例如，如果设计稿的宽度为750px，那么在CSS中设置一个元素的宽度为150px，postcss-pxtorem会将其转换为2rem（150/750=.2，.2*10=2）。postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，以实现响应式布局和适配不同屏幕尺寸的需求。

vue2如何引入postCss

Qin_jiangshan的博客

04-15

512

在vue根目录创建postcss.config.js。

vue2移动端适配插件‘postcss-pxtorem‘

weixin_61211370的博客

03-02

966

vue2移动端适配插件‘postcss-pxtorem‘

vue3.0+vite 使用 postcss-pxtorem 实现移动自适应（px转rem）