rem设置 vscode设置rem 适配 px转rem

星空小梦

已于 2024-09-02 14:05:17 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签：前端

于 2023-10-30 11:21:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50885665/article/details/134115077

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在网页开发中使用rem单位进行响应式设计，通过下载安装代码并设置基准大小，根据页面宽度自动调整根节点的字体大小。当窗口大小改变时，会重新计算并应用rem值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载安装

2、

二、如果代码里面设置就按代码里面来 -- 20

代码:

// 基准大小
const baseSize = 20
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

引入: