公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案 ...
背景 在项目使用lib flexible还有postcss px rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题。那些组件库的样式都变小了。 问题原因 变小的主要原因是第三库 css一依据data dpr 时写的尺寸 这时我们使用的flexible引入时 data dpr不是一个写死了的,是一个动态的 就导致这个问题 解决方式 在postcss.config.js中过滤node ...
2019-04-29 17:12 3 1869 推荐指数:
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案 ...
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案 ...
首先我们需要知道,flexible的实质是根据不同尺寸动态改变缩放比,动态改变html的style.fontSize,也就是rem布局,感兴趣的可了解如何实现1px物理像素。 (flexible由手淘团队开发,简直解决了rem适配的噩梦,如下是手淘rem需要适配的机型 ...
首先,需要卸载项目中的postcss-px2rem。 npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save ...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成 ...
1、npm install postcss-px2rem-exclude --save 2、npm install less less-loader --save-dev 3、npm install vux --save npm install vux-loader ...
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库。使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的。 一、基础(了解 <style></style> 的 scoped 属性) 在编 ...
vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem px2rem 构建项目(vue-cli3.0) vue create hello-world (Manuall select features) 安装px2rem ...