Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 。
前言
首先确定你的项目是Vue CLI3版本以上的。
一、移动端适配包
1、安装移动端适配包
npm i lib-flexible -S
2、在main.js
引入适配包
import Vue from 'vue'
import App from './App.vue'import 'lib-flexible' // 引入适配包Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
3、在index.html
编辑viewport
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 加上以下代码 --><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
二、CSS样式适配
1、安装px2rem-loader
包(只适用于css样式)
npm i px2rem-loader -D
2、在vue.config.js
配置
module.exports={chainWebpack: config => {config.module.rule('css').test(/\.css$/).oneOf('vue').resourceQuery(/\?vue/).use('px2rem').loader('px2rem-loader').options({remUnit: 75})},
}
三、CSS预处理语言样式适配
1、安装postcss-plugin-px2rem
(适用于css预处理语言)
npm i postcss-plugin-px2rem -D
2、在vue.config.js
配置
module.exports={css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。mediaQuery: false, //(布尔值)允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}}}
}
3、在package.json
配置,加入postcss
相关插件
{"name": "app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"core-js": "^3.6.4","lib-flexible": "^0.3.2","vue": "^2.6.11"},"devDependencies": {"@vue/cli-plugin-babel": "~4.3.0","@vue/cli-plugin-eslint": "~4.3.0","@vue/cli-service": "~4.3.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","node-sass": "^4.14.0","postcss-plugin-px2rem": "^0.8.1","px2rem-loader": "^0.1.9","sass-loader": "^8.0.2","vue-template-compiler": "^2.6.11"},"postcss": {"plugins": {"autoprefixer": {},"precss": {}}}
}
结语
作者:Vam的金豆之路
主要领域:前端开发
我的微信:maomin9761
微信公众号:前端历劫之路
Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】相关推荐
- cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言 首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
- Vue项目pc端适配方案(scss)
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
- vue实现移动端适配方案
vue实现移动端适配步骤如下: 先安装amfe-flexible和postcss-pxtorem: npm install amfe-flexible --save npm install postc ...
- vue做移动端适配最佳解决方案,亲测有效
最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案 ...
- vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
- vue rem移动端适配
参考:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 首先先弄清楚几个基本的原理知识: 物理像素:又称设备像素,是显 ...
- lib-flexible vue项目(移动端适配)
移动端适配步骤 1.安装lib-flexible(npm install lib-flexible --save-dev) 2.在main.js 中引入lib-flexible(import 'lib ...
- web SPA 移动端手机H5项目适配(vw+postcss)
在以前的时候,适配移动端我们一般使用rem,通过动态改变根fontsize来使页面缩放.其中很著名的就是淘宝开源的Flexible.当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备 ...
- html px2rem转化器,【技术】移动端适配 px2rem/px2vw 的原理与实现
简介 [目标]:前端开发移动端及H5时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局! [基础] dpr(设备像素比) css的像素px不等于设备像素/分辨率/各种值,css的px可 ...
最新文章
- 基于mysqld_multi实现MySQL 5.7.24多实例多进程配置
- 签约中国搜索,第四范式助力智慧媒体转型发展
- 浅谈WebKit之WebCore
- SSL 1624——小萨的烦恼【最短路】【枚举】
- 信息学奥赛一本通 1051:分段函数 | OpenJudge NOI 1.4 13
- 2020-11-18 Ubuntu 安装 Chrome
- 6天通吃树结构—— 第一天 二叉查找树
- Oracle将Java EE移交Eclipse基金会
- APP开发难吗?澳大利亚10岁儿童已开发5个手机App
- 单片机c语言程序源代码,51单片机C语言程序设计源代码
- 2022你不容错过的软件测试项目实战(web+app+h5+小程序)免费版
- MySQL视图(view)基本用法
- kettle-java代码执行转换并获取步骤度量
- flex布局 justify-content 新属性值 space-evenly
- 完美破解StartUML软件
- linux(debian 11)下安装nginx
- 成为第一没有捷径:AI新势力MindSpore成长秘籍 | 源创者说
- python-基础语法-glob.glob()
- linux常用命令 yum service ps
- 网站SEO优化之图片优化方法
热门文章
- 【数据库】事务管理概念
- 计算机职称评定认可增刊吗,核心期刊增刊评职称能用吗?
- 隐私计算头条周刊(10.16-10.22)
- BMA250 BMA253 ---国产的完美代替者 SC7A20 7A21-抬手亮屏传感器 技术指导代码分享欢迎索取
- Linux开机启动流程分析
- android更新UI(界面)的方法;android刷新界面数据的方法;android定时器更新界面
- 刀锋战记2服务端手游开服架设服务器搭建需要什么
- linux右键菜单颜色,Linux_自定义右键菜单代码详解, style !-- /*定义菜单 - phpStudy...
- 《蝙蝠侠前传3:黑暗骑士崛起》蓝光高清720P 1080P 下载
- 如何实现python中的strcmp函数