rem设置尺寸自适应——rem.js函数封装-CSDN博客

本文链接：https://blog.csdn.net/yehaocheng520/article/details/121280937

该博客介绍了一种使用rem单位和JavaScript函数setRem()来实现网页内容自适应不同屏幕尺寸的方法。通过设置基准大小和根据窗口宽度动态调整字体大小，确保在不同分辨率和宽高比的设备上，页面内容都能适配并保持视觉一致性。同时，博客强调了在处理屏幕尺寸变化时，需要重新计算rem值以保证自适应效果。

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

在编程过程中，因为设计图会按照统一的标准来设计，比如：PC端的设计图标准是:1920X1080,移动端的设计图标准是:750X1334,但是实际使用的时候，屏幕的尺寸并非完全一致，比如PC端的屏幕尺寸有：1920X1080,1360X768，当然还有更高分辨率的规格：2560X1600为2.5K屏，还有4K屏等。

而且屏幕的宽高比是不一样的，有的是16:9,有的是16:10等。

因此为了保证设计内容的自适应，需要根据屏幕的大小，内容自适应处理。

下面的rem.js文件就可以保证页面单位可以用rem来代替px，进行页面内容的展示处理。

`rem.js`文件

// 设置 rem 函数
function setRem() {
  //  PC端
  // 基准大小
  let baseSize = 100;
  let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  let vW = window.innerWidth; // 当前窗口的宽度
  let vH = window.innerHeight; // 当前窗口的高度
  // 非正常屏幕下的尺寸换算
  let dueH = vW * 1080 / 1920
  if (vH < dueH) {
    vW = vH * 1920 / 1080
  }
  let rem = vW * basePc; 
  document.documentElement.style.fontSize = (rem/1.72<40?45:rem/1.72) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
};

整体思路：

默认设计稿是1920X1080的设计稿，基础尺寸为100，然后转化这个100的参数。设计稿的宽高比是1920/1080
实际的屏幕尺寸是：vW=window.innerWidth和vH=window.innerHeight.宽高比是vW/vH
如果宽度自适应的情况下，按照设计稿的宽高比，可以获取到应有的高度为：vW*1080/1920，但是这个高度可能超过了实际的电脑一屏的高度，此时需要保证高度一屏铺满，宽度略微调整。此时的vW=vH*1920/1080，
rem是一个比例，在1920的尺寸下的100可以转化为当前宽度vW的尺寸下的多少，因此：rem=vW*100/1920，获取到rem的比例数值
根据rem的结果设置文档全局的字号大小，注意字体大小其实对应的是字体的高度，因此通过：document.documentElement.style.fontSize=(rem/1.72<40?45:rem/1.72)+"px"
最后设置函数自执行，还要监听页面的尺寸变化，尺寸变化时，也要重新计算比例。
上面的步骤就设置了整个文档的根元素单位rem的大小，使用过程中，需要根据实际的设计图尺寸/100+rem单位即可。