vue移动端、PC自适应(配置postcss-px2rem)
现在配置postcss-px2rem移动端适配的方法大致有几种:
不管用那种方法配置,首先拉取依赖lib-flexible 和 postcss-px2rem 一对
,或者lib-flexible 和 postcss-pxtorem 一对
,两种配置的依赖是不一样的,要注意。npm拉包默认就给你加到运行依赖里去了,拉开发依赖包时再加上-D
。lib-flexible
是运行依赖后面那个postcss-px2rem、postcss-pxtorem
是开发依赖
然后以下配置方法任选一种使用
1.在postcss.config.js中配置(postcss-pxtorem 版本为^5.1.1)
module.exports = {plugins: {'autoprefixer': {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"]},'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}}
};
2.在vue.config.js中配置(postcss-px2rem)
module.exports={css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({//lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px// 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库remUnit: 37.5})]}}},
}
3.其它
配置完成后注意删除掉index.html里的视窗meta标签 <meta name='viewport'> 以便让插件帮你生成。
最后在main.js里引入lib-flexible import 'lib-flexible'
npm run serve看看吧,原来用px写的css,插件已经帮我们转成rem了,不过注意两种配置的依赖postcss-pxtorem和postcss-px2rem有差别哦。
如果在适配时需要排除一些UI组件库的话可以这么做:
先拉取postcss-px2rem-exclude
依赖包
无需上面的配置了,直接在postcss.config.js里作这一个配置即可
module.exports = {plugins: {autoprefixer: {},"postcss-px2rem-exclude": {"remUnit": 75,"exclude": /node_modules/i}}
}
这个配置设置屏幕宽度为10rem*75px=750px,原来的box的width='375px’被转换为5rem,并排除了/node_modules下的内容,使UI组件大小不变。
适配PC端也很简单
找到lib-flexible包,注释掉如下的判断条件代码,让其在宽度大于540像素也适用。
function refreshRem(){var width = docEl.getBoundingClientRect().width;// if (width / dpr > 540) {// width = 540 * dpr;// }var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
不想被转换成rem,将px大写即可
.box{width:200PX;height:200PX;
}
vue移动端、PC自适应(配置postcss-px2rem)相关推荐
- vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
- vue 移动端PC端选用的ui框架
1.pc端的项目,最好的选择是ElementUI.(pc端) 一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.Element是饿了么前端开源维护的Vue UI组件库,更新频率 ...
- 【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
- vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
- vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应 我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
- vue 项目适配PC和移动端配置 (两套代码)
vue 项目适配PC和移动端配置 (两套代码) 1.首页的配置: 首页用重定向的方式来进行适配的方案:` const redirectPath = /Android |webos | iphone i ...
- vue项目实现pc端和手机端屏幕自适应
1.安装flexible插件 yarn add lib-flexible -S 下载淘宝的flexible插件,-S为产生依赖 2.安装px自动转换成rem的插件 yarn add px2rem-lo ...
- vue移动端和pc适配,搭建网站布局
最近自己写一个类似于blog小网站,主要目的是完善一下技术栈,本人是后端出身,一碰到前端的问题就头大,一开始打算在网上找了好些模板,但是发现几乎都是适用于管理端比如El-admin,这种模板网站封装的 ...
- Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
- vue移动端自适应布局
vue移动端自适应布局 根据postcss-pxtorem来实现自动渲染px至rem,不用再进行手动计算 一.实现方式 postcss-pxtorem:将px转换为rem: amfe-flexible ...
最新文章
- vue - .babelrc
- 如何快速理解递归——看这个就可以了
- 云主机tracert外网无返回需在安全组入方向加ICMP Time Exceeded TTLexpired in transit
- layui的登录ajax,layui如何实现登录功能
- 在Windows上编译和调试CoreCLR
- 每日算法系列【LeetCode 124】二叉树中的最大路径和
- /var/run/yum.pid 已被锁定,PID 为 XXXX 的另一个程序正在运行。
- 如何将kafka中的数据快速导入Hadoop?
- 抽象代数 01.01 群-运算及关系
- bismark判断甲基化的比对原理
- MacBook Air 2014 安装NVME硬盘并纯UEFI安装和引导Win7
- python中比较运算符
- 电脑显示屏只显示中间部分其他地方不显示问题
- 道达天际首次亮相军博会,“天网融合”引爆全场
- 我上岸了!深度剖析我的小红书 后台开发面经,以及我的 社招面试题目分享。
- 各大公司年报中真实的中国
- [转]Android开源项目收藏分享
- 我最喜欢的一节计算机课400字,我和计算机的故事作文400字
- 传递函数极点和零点的几何表示
- 新零售风口下品牌方如何玩转线下媒体,这四个维度或许告诉你答案