vue使用flexible和px2rem实现移动端适配
首先下载flexible.js和px2rem
npm install px2rem-loader
对webpack进行配置。进入build文件夹对utils.js中的postcssLoader做如下修改
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap,
plugins: function () {
return [
require('postcss-px2rem')({remUnit: 75})
]
}
}
}
然后在vue-loader.conf.js中的module.exports里添加
postcss: [
require('postcss-px2rem')({remUnit: 75})
]
remUnit后的数字为设计稿宽度的十分之一
之后在全局引入flexible.js,在main.js加入
import '../static/js/flexible.js';
来源:https://segmentfault.com/a/1190000016112264
vue使用flexible和px2rem实现移动端适配的更多相关文章
- vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
随机推荐
- poj 2288
传送门 解题思路 状压dp,记录路径条数,dp[S][i][j]表示状态为S,前一个点是i,再前一个点是j的最大值,然后在开个一样的数组记录方案数,时间复杂度O(2^n*n^2),注意要用long l ...
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
- python 与 selenium 学习笔记
在写自动运行测试用例,并且生成HTML报告的时候,遇到了这个报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in positi ...
- Redis源码解析:19Hiredis异步API代码解析
Hiredis中的异步API函数需要与事件库(libevent,libev, ev)一起工作.因为事件循环的机制,异步环境中的命令是自动管道化的.因为命令是异步发送的,因此发送命令时,必要情况下,需要 ...
- 实例详解TOP命令
Linux中的top命令显示系统上正在运行的进程.它是系统管理员最重要的工具之一.被广泛用于监视服务器的负载.在本篇中,我们会探索top命令的细节.top命令是一个交互命令.在运行top的时候还可以运 ...
- 洛谷P3296 刺客信条
题意: 给你一棵树,有两组01权值a[]和b[].n <= 700 你要构造一个自己到自己的映射,使得整棵树的形态不变,且映射后的a[]和映射之前的b[]中不同元素尽量少. 解: 发现这个整棵树 ...
- Unknown command: crawl
Use "scrapy" to see available commands 1.使用命令行方式cmd,是因为没有cd到项目的根目录,crawl会去搜索cmd目录下的scrapy. ...
- Sublime svn 安装
Ctrl + Shift + P 进入 install package 输入svn windows系统选择:TortoiseSVN (在此之前,请确保电脑上已经安装好了TortoiseSVN) li ...
- Jquery 判断值是否存在于数组之内
var strArray=str.split(","); var fixed_init=function(v){ if($.inArray(v,strArray)==-1){ // ...
- Hackerrank--Team Formation
题目链接 For an upcoming programming contest, Roy is forming some teams from the n students of his unive ...