cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端

1.下载lib-flexible

我使用的是vue-cli+webpack，所以是通过npm来安装的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.设置meta标签

通过meta标签，设置设备宽度以及缩放比例

4.安装px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

这里是重要的一步~~

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {

loader: 'css-loader',

options: {

minimize: process.env.NODE_ENV === 'production',

sourceMap: options.sourceMap

}

const px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 75

}

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {

const loaders = [cssLoader,px2remLoader]

if (loader) {

loaders.push({

loader: loader + '-loader',

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

}

6.重启，一切ok~

当配置完之后，只需要重启下服务，就自动转化为rem了

npm run dev

cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端相关推荐

cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
webpack转内联px为rem_Vuejs项目配置webpack将px自动转化为rem，适配移动端
本项目采用 iPhone 6 物理像素为 750px * 1334px 的设计稿 rem兼容性先看看rem的兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持大 ...
vue适配移动端px自动转化为rem
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
移动端（五）flexible.js + rem适配布局
rem适配方案flexible.js github地址:https://github.com/amfe/lib-flexible flexible.js 是手机淘宝团队出的移动端布局适配库不需要在写 ...
Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px
我用的是postcss-post,cube,在node--modules 下找到postcss-pxtorem/indedx.js 'use strict';var postcss = require ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端

cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端相关推荐

最新文章

热门文章