http://tool.lu/c/developer  开发类在线工具 https://github.com/leon776/setHtmlRem   setHtmlRem https://github.com/leon776/grunt-px2rem   px2rem…

CSS单位rem 在W3C规范中是这样描述rem的: font size of the root element. 移动端越来越多人使用rem,推荐淘宝开源框架lib-flexible 今天来介绍一下使用 预处理器转换px单位到rem 首先是sass的 //定义一个变量和一个mixin $baseFontSize: 16;//默认基准font-size @mixin px2rem($name, $px){ #{$name}: $px / $baseFontSize * 1rem; } // 使用…

1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里是按需引入,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 首先,安装babel-plugin-component: npm install babel-plugin-component -D 然后,需要将项目里的.babelrc修改为: {…

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load…

vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem 1.安装 npm install px2rem-loader  lib-flexible --save 2.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 3.在build下的 utils.js中,找到generateLoaders 方法,在这里添加 const px2remLoader = { loader: 'px2rem-loader',…

项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) 配合amfe-flexible(https://www.npmjs.com/package/amfe-flexible) 项目使用的是react+webpack,yarn安装好上述两个依赖文件以后,首先在index.js文件中引入amfe-flexible,代码如下: 重点是: import 'a…

在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库． npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta name="viewport" content="width=device-width, initial-scale=1.0"> 借助px2rem工具 npm i px2rem-loader --save-dev 然后就是配置这个工具,由于是loader文件,所有…

参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rem px2rem({remUnit: 37.5})   在index.html 加以下的script <script>document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body.client…

最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem 可以参考一下这篇文章vue中的适配:px2rem 在webpack.base.conf.js中 vuxLoader中配置以下代码 { name: 'vux-ui' }, { name: 'after…

公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧.以下记录我的项目框架搭建及填坑方案. 搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了.下面说明项目搭建成功后的适配方案. 第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible…