vue-cli3.0引入px2rem与lib-flexible 移动端适配

最新推荐文章于 2025-07-10 16:43:18 发布
最新推荐文章于 2025-07-10 16:43:18 发布
阅读量1.5w 收藏 31
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 移动端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31393401/article/details/82353267
本文介绍了在Vue-cli3.0中如何使用px2rem和lib-flexible进行移动端适配。lib-flexible用于根据设备dpr和宽度进行适配，px2rem则自动将CSS中的px转换为rem单位。通过安装和配置这两者，可以简化移动端开发中的适配工作。同时，提到了一些配置技巧，如忽略某些px单位，以及与vw方案的比较。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~

lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：yarn add lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js'

pxtorem

作用：将项目中css的px转成rem单位，免去计算烦恼
安装：yarn add postcss-pxtorem
配置：package.json内，在postcss内添加：

  "postcss": {
   
   
    "plugins": {
   
   
      "autoprefixer"
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue3.0+前端项目rem适配
sayUonly的博客
04-09 510
准备的工具 首先需要准备两个vue插件，amfe-flexible和postcss-pxtorem。 引入方式如下： npm i amfe-flexible -S npm i postcss-pxtorem -D 配置工具 在main.js文件引入amfe-flexible： import 'amfe-flexible' 在package.json进行如下配置： { "postcss": {...
vue-cli3.0中大屏使用rem做响应式(引入rem.js)
一只小白奔向大牛的故事
07-17 3688
因为目前有px转换rem的插件但是我不想用感觉费劲 首先我们先找一段rem.js引入到vue的index.html中 上代码: <script type="text/javascript"> /* * @ pwidth 设计稿的宽度 * @ prem 你要1rem比多少px 我的是1rem比100px * */ ...
vue3.0 rem适配
乐YB的博客
03-02 1707
1.安装两个插件 npm i postcss-pxtorem -S npm i amfe-flexible -S 2.根据vue3提供的新配置方法，在vue-config.js中对CSS做配置： const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = { css:{ sourceMap:false, loaderOpt
屏幕适配方案 - postcss-pxtorem
最新发布
weixin_41618917的博客
07-10 723
postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，已实现响应式布局和适配不同屏幕尺寸的需求。它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。
vue项目px转换rem
aGreetSmile的博客
08-29 312
首先安装amfe-flexible插件，在main.js里引入 1、npm i amfe-flexible 2、import 'amfe-flexible' 然后再，安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autopref...
vue cli3.0 rem 使用
huqiang1995的博客
07-03 344
https://www.jianshu.com/p/94902796f2ad
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式...
vue-cli使用px2rem 或 postcss-plugin-px2rem px转换rem
weixin_57156917的博客
07-20 1032
1.安装插件 （1）安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev （2）移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible --save （3）main.js中引入 "lib-flexible" import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js) 2
vue-cli3中使用rem自适应
jinmo277的专栏
12-07 1176
安装 npm install postcss-px2rem --save 在vue.config.js中增加配置 const px2rem = require('postcss-px2rem'); const postcss = px2rem({ remUnit: 75 // 基准大小 baseSize，需要和rem.js中相同 }) module.exports = { ...
vue移动端适配方案lib-flexible和px2rem-loader
weixin_46113016的博客
06-03 569
1.安装插件 lib-flexible: npm i lib-flexible --save-dev 2.在入口文件main.js中引入lib-flexible：import ‘lib-flexible/flexible’ 3.安装px2rem-loader： npm install px2rem-loader --save-dev 4.配置px2rem-loader： 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const cssLoader
vue-cli@3搭建移动端适配
19年8月小结
08-06 1615
在cli@3里使用安装插件可以适配各个移动端的适配，安装px2rem-loader和lib-flexible 在main.js里引入import ‘lib-flexible/flexible.js’; 在nodemodels里面的vue里面的cli-service里面的lib下的config文件夹下的css.js里 rule里面补充代码里的配置 rule .use('css...
vue3移动端适配的解决方案
weianl的博客
12-03 1万+
最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。
Vue3 移动端适配
m0_73461567的博客
02-20 966
原因：因为页面中的文本超出了屏幕宽度，其实是正常的，只是屏幕被撑宽了，看不到全部的屏幕，限制字体的宽度解决。vant组件库、css/scss/less、组件内style会转换。屏幕600宽，盒子就占一半了，不正常，显示的vw宽度没问题。例：屏幕350宽时，盒子占3分之一，正常情况。新增postcss.config.js。：有一个控制台警告可忽略，或者使用。实现：使用 vw 完成移动端适配。注意：出现适配失败时的解决方案。但是元素行内样式不会转换。
移动端适配rem方案、postcss-pxtorem+css中二倍图，三倍图的使用、uniapp 设计稿px处理为rpx
热门推荐
muzidigbig的博客
04-24 1万+
做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。这个问题我们可以使用相对单位rem指相对于根元素的字体大小的单位。设置html的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。 uniapp 单位rpx ，设计稿尺寸px处理方式 postcss-pxtorem对内联样式、Echarts postcss-pxtorem的弊端 uniapp 设计稿px处理为rpx
vue3.0项目中运用vant的以及移动端的适配
chengcheng9876的博客
04-25 3269
vue3.0项目中运用vant的以及移动端的适配
pc端，移动端css重置样式
weixin_33974433的博客
03-15 241
pc： html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockq...
【学习笔记07】vue3移动端的适配
yizhiyang
12-23 2658
vue3移动端的适配
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值