基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

原创 已于 2023-01-31 20:01:36 修改 · 682 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #postcss #javascript

于 2020-10-31 14:47:54 首次发布
本文介绍了如何在基于vue-cli3的项目中进行移动端样式适配，主要涉及lib-flexible和postcss-px2rem的使用。lib-flexible会动态设置viewport，postcss-px2rem则负责将px转换为rem。在main.js中引入lib-flexible，并在vue.config.js中配置postcss-px2rem，确保项目重启后生效。通过调整remUnit值，可以实现设计图的1:1还原，同时兼容第三方UI框架。

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

基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

1，安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save

npm install postcss-px2rem --save

简要介绍这两个包的用途：

flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

例如在Galaxy S III:

例如在iphone6/7/8:

postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。

2, 

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue-cli3.0布局实战篇---移动端适配
洋滔的博客
08-24 646
Vue-cli3.0布局实战篇---移动端适配 前言： 本文所采用技术栈：vue3+vue-router4+vuex4+vant3，今天我们来一起看下，在使用脚手架3.0开发项目的时候，怎么去解决移动端适配问题，这样做的好处是一次适配，后续的开发过程都可以解决因为元素样式大小带来的布局问题。 没有做适配的时候，px就是像素，不会根据设备的大小去变化，就像下图这样： 安装amfe-flexible 打开项目所在文件夹，输入命令：npm i -S amfe-flexible ...
lib-flexible和postcss-px2rem PC端和移动端的适配 （PC端的设计稿1920，移动端的设计稿750）
weixin_43675173的博客
04-07 2875
之前ui 给pc端的设计稿是 1920* 1080 ，并没有 1，安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save 提过要写移动端网站，所以之前一直做的是pc端， 在node_modules 找到lib-flexible文件下的flexible.js，然后找到refreshRem函数，将其改为： 那么pc端的适配就好了 后来又在这..
vue3 移动端适配完整详细案例代码
最新发布
07-15 256
本文介绍了在Vue 3项目中实现移动端适配的方案。主要步骤包括：1)安装postcss-pxtorem插件将px转换为rem；2)配置postcss.config.js文件，设置rootValue为75(设计稿750px)；3)动态设置根元素字体大小，根据设备宽度自动缩放；4)在组件中直接使用设计稿尺寸(如28px标题)。通过这种方法，开发时可直接使用设计稿尺寸，系统会自动转换为响应式单位，确保在不同设备上保持良好显示效果。关键点在于postcss配置和动态设置根元素字体大小。
vue 移动端适配（lib-flexible postcss-px2rem）
qq_44306441的博客
10-09 225
yarn add lib-flexible postcss-px2rem -S 然后删除public/index.html里的 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 然后在mian.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import "lib-flexible"
基于vue项目移动端样式适配，lib-flexible和postcss-px2rem
only_cheng的博客
08-29 388
安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save flexible会为页面根据屏幕自动添加 <meta name=‘viewport’ > 标签，动态控制initial-scale，maximum-scale，minimum-sc...
vue2大屏适配lib-flexible与postcss-px2rem
lishuaihao的博客
04-02 1270
vue2大屏适配这里采用了一个新的方案，由于这个项目就是一个PC大屏，所以需要对整个项目进行适配，postcss-px2rem就是对所有的px转变成为rem的，由于rem是根据font-size的值改变元素大小的，所以他们搭配起来就很完美。下载他的源码，然后放入到项目中，在main.js中直接import，lib-flexible的唯一作用就是拖动浏览器可以改变html的字体大小，如果大小改变了，那么就说明这一步成功了。在main.js中引入lib-flexile。
vue-cli3+lib-flexible+postcss-px2rem+less
josiecici的博客
10-28 581
vue-cli3+lib-flexible+px2rem-loader 安装依赖 npm install px2rem-loader npm i lib-flexible --save main.js导入 import 'lib-flexible/flexible' 配置px2rem-loader // vue.config.js module.exports = { chainWebpack: config => { config.module
vue-cli3中通过配置lib-flexible和post-px2rem来进行自适应布局
YoHoooo_的博客
02-28 2151
新的vue-cli脚手架相对于上一版本已经精简了很多，将很多的配置文件给隐藏了起来，因此很多的配置都需要在自定义配置文件vue.config.js中进行，而本文则是将px2rem配置到postcss.config.js中。 ##1 安装lib-flexible 通过yarn或npm都可以 ··· npm i lib-flexible --save //在入口文件main.js中进...
vue 中 使用flexible和 postcss-px2rem适配
qq_41619283的博客
09-10 756
这请问请问里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎...
vue-cli3 使用postcss-px2rem和lib-flexible
阿之阿佐
12-05 1702
1、cnpm install lib-flexible --save  2、cnpm install postcss-px2rem --save 3、main.js 引入 import "lib-flexible"; 4、vue.config.js module.exports = {     lintOnSave: false,//关闭eslint     css: {       ...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from &#39;vue&#39; import App from &#39;./App.vue&#39; import &#39;lib-flexible&#39; // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;) 3、在 index.html 编辑
在 React + UmiJS 项目中使用 postcss-plugin-px2rem + lib-flexible 的完整指南
qq_43570260的博客
04-03 828
px: 75, // 普通屏'2x': 37.5 // Retina屏（DPR=2）},// 其他配置...exclude: /(node_modules|antd|@antd)/i, // 排除antd等库selectorBlackList: ['am-', 'ant-'] // 过滤特定前缀})：动态计算根字体大小，实现响应式布局：自动将px转换为rem，提高开发效率UmiJS内置的PostCSS支持：无需额外配置构建工具。
如何在vue-cli3中使用postcss-px2rem
weixin_43120901的博客
06-10 749
传送门： https://www.cnblogs.com/aramey/p/11017428.html 先创建文件后安装，一步不可缺少
vue3-移动端适配
m0_65791412的博客
06-08 2705
移动端适配
Vue3 移动端适配
m0_73461567的博客
02-20 967
原因：因为页面中的文本超出了屏幕宽度，其实是正常的，只是屏幕被撑宽了，看不到全部的屏幕，限制字体的宽度解决。vant组件库、css/scss/less、组件内style会转换。屏幕600宽，盒子就占一半了，不正常，显示的vw宽度没问题。例：屏幕350宽时，盒子占3分之一，正常情况。新增postcss.config.js。：有一个控制台警告可忽略，或者使用。实现：使用 vw 完成移动端适配。注意：出现适配失败时的解决方案。但是元素行内样式不会转换。
vue3移动端适配
m0_74060440的博客
01-14 1675
vue3移动端适配
Vue3实现移动端适配
yvshancha的博客
11-09 1342
Vue3中实现移动端适配
vue3 vant移动端适配
computeds的博客
08-18 488
postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem。lib-flexible 用于设置 rem 基准值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A黄俊辉A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值