当前位置: 首页 > news >正文

关于vue在PC端,rem对不同屏幕进行适配

1.新建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'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

2.在项目的入口文件main.js中引入import ‘@/utils/rem.js’

3.在vue项目中创建postcss.config.js文件,并且下载依赖 npm install postcss-pxtorem --save

module.exports = {plugins: {autoprefixer: {},'postcss-pxtorem': {rootValue: 16,propList: ['*'],selectorBlackList: ['.norem'],exclude: /node_modules/i}}
}

 

http://www.gsyq.cn/news/1462.html

相关文章:

  • GreatSQL分页查询优化案例实战
  • 技术面:Java并发(线程同步、死锁、多线程编排)
  • mac一键关闭chrome自动更新
  • 政务预约系统介绍
  • 猜灯谜赢大奖系统介绍
  • 【初赛】反码 补码 原码 - Slayer
  • Eclipse中创建Maven多模块工程
  • 面试题记录:分库分表
  • 微信小程序语音转文字(插件:微信同声传译)
  • H5滚动截取长图
  • linux安装vnc远程桌面
  • 【EI-JA期刊同步征稿|武汉科技大学主办】第六届医学人工智能国际学术会议(ISAIMS 2025)
  • 备战软考5
  • AI GEO领域发展机遇大
  • 数据结构与算法-21.优先队列
  • 普科科技 PKC7030 高频电流探头调零指南
  • 在AI技术快速实现创意的时代,挖掘真实需求成为核心竞争力——某知名实时语音转录系统需求洞察
  • 海明码破解指南:从让人头疼的软考题到内存背后的无名英雄
  • 第5篇、 Kafka 数据可靠性与容错机制
  • Shell符号详解
  • Dynamics 365 CRM + Power Platform 技术顾问:解锁 IT 高薪赛道,长沙爱码士 IT 助你全程通关
  • 295、嫦娥
  • rmrs 题解
  • 2025 杭电暑期多校训练
  • 友链
  • qoj6279 Honeycomb
  • Vue 将api 获取的 json 数据保存到本地
  • Claude Code新手入门指南:AI编程助手完全教程
  • cmov用法一例
  • Codeforces Round 1049 (Div. 2)(A~D)