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 ...
最新文章
- php获取地址栏id,如何解决php urldecode乱码问题
- python解释器是什么-python解释器都有什么
- 0x10基本数据结构
- MPMoviePlayerController属性方法简介
- python中nlp的库_用于nlp的python中的网站数据清理
- Jenkins持续集成之小试牛刀
- Java自动化测试框架-09 - TestNG之依赖注入篇 (详细教程)
- php 个人中心常见界面,UI设计灵感:个人中心界面设计(User Profile)
- mysql 5.1主从_MySQL5.1版本的主从复制搭建 | 学步园
- PhotoShop大师之路视频
- 【ZZULIOJ】1097: 计算平均成绩(函数专题)
- 红胖子创业一年整总结:前二十年题记,萌芽初期,外包初期,创业初期,未来规划
- wps复选框怎么设置,wps表格中如何插入复选框?
- 明天冬瓜哥与你见面畅谈!不用报名直接来!
- 基于可见光通信的智慧路灯
- selenium如何添加新标签页
- ros2订阅esp32发布的电池电压数据-补充
- 信号完整性和电源完整性基本介绍
- shell脚本中的expr
- java中怎么编写围棋对弈,TPWEIQI : JAVA 网络围棋对弈系统