vue中使用rem适配方案
一、移动端适配常见方案:
(1)通过媒体查询的方式即CSS3的meida queries
(2)以天猫首页为代表的 flex 弹性布局
(3)以淘宝首页为代表的 rem+viewport缩放
(4)rem 方式
参考博客:https://blog.csdn.net/chenjuan1993/article/details/81710022
二、vue中使用rem适配方案
1、安装插件
(这里我使用的是cnpm比较下载安装快速)
cnpm i lib-flexible --save
// 下载lib-flexible
cnpm install px2rem-loader
// 安装px2rem-loader
2、在main.js中引入lib-flexible
import
'lib-flexible/flexible'
//引入rem自适应
3、在index.html中添加meta标签
<meta name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
4、
更改配置
在 build/util.js 中 按如下更改
(1)、将px2rem-loader添加到cssLoaders中
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
//一般设置75
remUnit: 75 // 37.5按照375设计图尺寸在设计,75安装750设计图尺寸设计
}
}
(2)、在generateLoaders方法中添加px2remLoader
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if(loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
5、重启
npm run dev
参考:https://www.cnblogs.com/dyy-dida/p/11107639.html
ps:还有一种方法实现
借助两个插件,将px进行转化为rem。
- lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
- postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem。
主要步骤:
a、npm i -S amfe-flexible
b、import 'amfe-flexible'; //引入rem自适应
c、在index.html中添加meta标签
<meta name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
d、npm install postcss-pxtorem --save-dev
e、更改配置
在vue-cli2下,根目录中的 .postcss.js (没有,就新建一个)
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": { // 此处为添加部分
rootValue: 37.5, // 对应16px 适配移动端750px宽度
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}
在vue-cli3下,根目录中的 vue.config.js (没有,就新建一个)
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
}
}
vue中使用rem适配方案相关推荐
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动web开发之rem布局(rem基础、媒体查询、 less 基础、rem适配方案)
移动web开发之rem布局 一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
- vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则(postcss-pxtorem和postcss-px-to-viewport)
一.vue中自适应rem的设置 新建文件src/libs/rem.js function setRem() {// 750px为设计稿视口宽度 字体大小默认18px;const screenWidth ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
- Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
- vue实现移动端适配方案
vue实现移动端适配步骤如下: 先安装amfe-flexible和postcss-pxtorem: npm install amfe-flexible --save npm install postc ...
- vue中移动端自适应方案
方案1: 直接引入js (自己 写的动态改变fontsize的js) function htRem() {var ww = document.documentElement.clientWidth; ...
- uniapp及vue中动画功能实现方案
需求场景:实际开发过程中,我们经常遇到各类比较炫酷的动画开发,比如简单的echarts插件使用,animation动画等... 动画实现方案: 1.css动画,如gif,a-png,animation ...
- vue|react脚手架rem适配
react适配 初始化脚手架 create-react-app adpater_react 安装依赖 方案一: yarn add postcss-px2rem customize-cra react- ...
最新文章
- OpenCV3.2.0+VS2017在window10开发环境配置记录
- web入门+书籍推荐
- php求未知数怎么求,PHP的-输入未知数的字段到MySQL-为此的最佳...
- 电脑软件:微软Windows官方电脑管家,仅针对国内用户?看看怎么说
- 好程序员技术教程分享JavaScript运动框架
- 量子计算与量子信息_量子计算会破坏安全性吗?
- Oracle 外部表加载监听日志,使用外部表访问监听日志
- Volatile的实现原理(看这篇就够了)
- C# 中使用反射的优缺点
- 解决keil4与keil5不兼容问题
- FileSplit简单使用
- 用 Python 分析《红楼梦》(2)
- 仪表板 ajax实例,CQD 开发示例 - Skype for Business Server 2015 | Microsoft Docs
- java如何开发视频软件_使用JAVA编写视频播放器
- Android4.4 状态栏WiFi图标显示流程
- 【图灵教育读书】分享读书心得,奖励精品图书!
- 引用feignClient对象项目启动异常-Consider defining a bean of type ‘com.xxx.service.xxxRemote‘ in your configura
- 数据压缩作业2.1 多媒体文件分析——TGA文件
- 数据治理:数据治理框架和标准
- css水平垂直居中对齐方式
热门文章
- 【51Nod1585】买邮票送邮票
- Xshell远程登录中方向键及删除键出现乱码问题
- [转载]ZT:趋势交易者的利器----MACD指标在美元指数判断与实战中的运用
- Mysql数据库经验总结
- 汽油运输基于资产监测终端案例分析
- 伪随机函数 密码学_密码学与理论2:什么是伪随机
- 什么是IaaS、PaaS、SaaS?
- 配置静态路由的下一跳使用出站接口和下一跳IP的差别
- 视频提取关键帧工具类KeyFramesExtractUtils.py,动态支持三种取帧方式,关键参数可配置,代码经过优化处理,效果和性能更好。
- 谷歌以54亿美元收购网络安全公司、数百万惠普设备存在高危漏洞|3月10日全球网络安全热点