vue中的适配：px2rem

这应该是vue项目在适配移动端时候，最简单的方法之一
下面是基本步骤（使用cnpm）
1.下载并引入lib-flexible

cnpm install --save lib-flexible

在main.js中：import ‘lib-flexible/flexible’
2.引入px2rem-loader

cnpm install --save  px2rem-loader

3.将px2rem-loader添加到cssLoaders

在build/util.js中添加如下代码

代码如下

const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75//这个是重点，设计稿是750px
   }}

const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做单位按照750的设计稿撸代码了，

转载于:https://www.cnblogs.com/mica/p/10690785.html

vue中的适配：px2rem相关推荐

在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
vue中使用指令解决iphonex底部的适配问题
vue中使用指令解决iphonex底部的适配问题 1.全局自动化加载指令 1.1 在src新建directives文件夹,并且新建index.js 1.2 在main.js引入directives/i ...
vue中使用postcss-pxtorem实现适配
前言安装amfe-flexible和postcss-pxtorem 配置及使用可能遇到问题前言很少在pc端使用rem,不过做c端产品的,还是得在每个尺寸下都和设计稿完全一样,在自己手写媒体查询 ...
cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
vue中播放h265视频流
最近vue推流视频项目需要视频流适配h265,找到很多解码js,发现稳定和好用的还是WXInlinePlayer. 官方文档地址https://github.com/ErosZy/WXInlinePl ...
vue面试H5适配快速搭建
vue面试H5适配快速搭建一.环境的搭建 nodejs 环境搭建 nodejs下载检查版本 node -v npm -v 切换淘宝镜像cnpm npm install cnpm -g --regi ...

vue中的适配：px2rem

vue中的适配：px2rem相关推荐

最新文章

热门文章