vue项目适配 rem
1.安装插件
npm install postcss-px2rem px2rem-loader --svae
2.在vue.config.js内加入
// 引入等比适配插件
const px2rem = require(‘postcss-px2rem’)
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize,需要和rem.js中相同
remUnit: 16
})
3.在util文件夹创建rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + ‘px’
console.log(baseSize * Math.min(scale, 2) + ‘px’)
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
4.修改1920为自己蓝湖设计稿大小
5.vue.config.js 里面的css 添加配置postcss
css: {
loaderOptions: {
// 给 stylus-loader 传递选项
stylus: {
import: ‘~@/assets/style/global.styl’
},
postcss: {
plugins: [
postcss
]
}
}
6.main.js里引入import ‘./utils/rem’
7.重启项目,查看是否适配成功
vue项目适配 rem相关推荐
- vue 项目适配PC和移动端配置 (两套代码)
vue 项目适配PC和移动端配置 (两套代码) 1.首页的配置: 首页用重定向的方式来进行适配的方案:` const redirectPath = /Android |webos | iphone i ...
- vue项目配置rem移动端适配
一.项目介绍 脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件 下载插件 npm i ...
- vue项目转rem;H5配置rem;px转rem
H5可以配合vant组件库书写项目,和使用rem后vant组件样式变小了解决办法.(引入方式) 以下是配置rem步骤: 1.安装 flexible和 postcss-px2rem(命令行安装) lib ...
- vue项目使用rem让页面字体fontsize自适应
页面字体fontsize自适应(在页app.vue页面添加) 将css里面的html和body的font-size都设置成62.5%然后10px=1rem这样写页面 <script> co ...
- Vue项目pc端适配方案(scss)
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
- vue项目中常用的优秀插件库
1. vue的ui框架: pc端UI框架:iview,element-ui 移动端UI框架:参考https://www.jianshu.com/p/c3c671787d1d 2. vue的数字动画插件 ...
- Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flex ...
最新文章
- 数据统计之月增用户统计
- 【智力题】国际象棋问题
- Google Chrome等浏览器不允许关闭点击跟踪??
- dll已加载但找不到入口点dllregisterserver_Java 是如何加载类的?
- svg 自己做动画图片 GSAP真的好用
- Python案例:倒置英文句子
- 开课吧:学习C语言应该从哪些方面入手?
- 自然辩证法 题目2
- eclipse汉化 eclipse汉化版退回英文版详细介绍
- android-sdk-windows 如何安装,android-sdk-windows 安装.doc
- android 5.0设备 外接键盘 输入中文
- 程序员年薪45万,国企年薪20万,该不该跳槽去国企?
- 最全的【英语词根词缀思维导图总结】
- python股票分析入门_学习用Python分析股票数据(入门)
- 知乎App加密流量分析初探
- 自研数据分析工具——yandas系列二:分析泰坦尼克号沉船事件中的乘客信息表
- 华硕ROG|玩家国度冰刃6双屏GX650RX Windows11原厂预装系统 工厂模式恢复安装带ASUSRecevory一键还原
- seewo一体机使用教程
- 用“约苗“平台,查看疫苗科普,预约疫苗接种!
- Linux下命令行使用技巧