nuxt.js使用rem自适应所有屏幕（PC端与手机端）

原创

已于 2023-05-25 11:55:16 修改 · 3.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端

于 2023-05-24 16:43:02 首次发布

文章介绍了如何通过JavaScript函数设置HTML字体大小来实现响应式布局。在PC端和手机端分别创建了rem.js文件，根据设计图的尺寸动态计算rem值，以适应不同设备的屏幕宽度。在Nuxt.js配置中引入JS插件，并在CSS中使用rem单位进行样式设置，以实现像素到rem的转换，确保跨设备的视觉一致性。

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

在plugins新建rem.js（PC端）

// 隔离作用域，避免全局变量的污染
!(function () {
  function setHtmlFontSize() {
    var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
    var bodyWidth = document.documentElement.getBoundingClientRect().width; // 当前窗口的宽度
    console.log(bodyWidth, '屏幕宽度');
    var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
  }
  setHtmlFontSize();
  window.addEventListener("resize", function () {
  
    setTimeout(function () {
      setHtmlFontSize();
    }, 100)
  })
})();

在plugins新建rem.js（手机端）

// 隔离作用域，避免全局变量的污染
!(function () {
  function setHtmlFontSize() {
    var whdef = 100 / 750; // 表示750的设计图,使用100PX的默认值
    var bodyWidth = document.documentElement.getBoundingClientRect().width; // 当前窗口的宽度
    console.log(b