如何用js动态控制rem适配移动端

用JS动态控制rem适配移动端的方式包括：动态设置根元素字体大小、监听窗口尺寸变化、利用viewport进行适配。在移动端开发中，使用rem（相对于根元素的单位）进行布局，可以使页面在不同尺寸的设备上保持一致的比例。通过动态控制rem，可以确保页面在不同设备上的适配效果。

其中最重要的一点是动态设置根元素字体大小。可以通过JavaScript根据视口的宽度动态调整根元素的字体大小，从而实现响应式设计。接下来，我们将详细探讨这一点，以及其他相关的技术和方法。

一、动态设置根元素字体大小

在移动端适配中，利用JavaScript动态设置根元素（html）的字体大小是实现响应式布局的关键步骤。通常，我们可以根据视口宽度来设置根元素的字体大小，例如：

(function() {
  var setRem = function() {
    var html = document.documentElement;
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width / 10 + 'px'; // 假设设计稿为750px宽
  };
  setRem();
  window.addEventListener('resize', setRem);
})();

在上面的代码中，我们首先定义了一个setRem函数，该函数根据视口宽度动态设置根元素的字体大小。然后，我们在页面加载时和窗口大小变化时调用这个函数。

二、监听窗口尺寸变化

在移动端设备中，用户可能会旋转屏幕，这会导致视口尺寸的变化。为了确保页面在屏幕旋转时仍然能够正确适配，我们需要监听窗口的尺寸变化事件，并在尺寸变化时重新计算根元素的字体大小。

window.addEventListener('resize', function() {
  var html = document.documentElement;
  var width = html.getBoundingClientRect().width;
  html.style.fontSize = width / 10 + 'px'; // 假设设计稿为750px宽
});

通过监听resize事件，我们可以在窗口尺寸变化时动态调整根元素的字体大小，从而确保页面在屏幕旋转时仍然能够正确适配。

三、利用viewport进行适配

除了使用JavaScript动态设置根元素的字体大小之外，我们还可以利用viewport来进行适配。viewport是一个HTML的meta标签，用于控制网页在移动设备上的布局和缩放。通过设置viewport，我们可以控制页面的缩放比例和视口宽度，从而实现响应式布局。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在上面的代码中，我们通过设置viewport的width属性为device-width，来确保页面在不同设备上的适配效果。同时，通过设置initial-scale、maximum-scale和minimum-scale属性，我们可以控制页面的缩放比例，从而防止用户手动缩放页面。

四、使用媒体查询进行适配

除了使用JavaScript和viewport进行适配之外，我们还可以使用CSS的媒体查询来实现响应式布局。媒体查询允许我们根据设备的特性（如宽度、高度、分辨率等）来应用不同的样式，从而实现响应式设计。

@media (max-width: 600px) {
  html {
    font-size: 12px;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 1201px) {
  html {
    font-size: 20px;
  }
}

在上面的代码中，我们定义了三个媒体查询，根据设备的宽度来设置根元素的字体大小。这样可以确保页面在不同尺寸的设备上都能够正确适配。

五、结合JavaScript和媒体查询进行动态适配

有时候，仅仅依靠JavaScript或者CSS媒体查询可能无法满足我们的需求。在这种情况下，我们可以结合JavaScript和媒体查询来进行动态适配。例如，可以在JavaScript中根据视口宽度动态设置根元素的字体大小，然后通过CSS媒体查询来调整其他元素的样式。

(function() {
  var setRem = function() {
    var html = document.documentElement;
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width / 10 + 'px'; // 假设设计稿为750px宽
  };
  setRem();
  window.addEventListener('resize', setRem);
})();

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
@media (min-width: 1201px) {
  body {
    background-color: lightcoral;
  }
}

通过结合JavaScript和媒体查询，我们可以实现更加灵活和动态的适配效果。

六、使用预处理器和后处理器进行适配

在实际项目中，为了提高开发效率和代码的可维护性，我们可以使用CSS预处理器（如Sass、Less）和后处理器（如PostCSS）来进行适配。例如，可以使用PostCSS的postcss-pxtorem插件，将CSS中的px单位自动转换为rem单位，从而简化适配的工作。

首先，我们需要安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

然后，在PostCSS的配置文件中添加postcss-pxtorem插件：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 根据设计稿的宽度设置根元素的字体大小
      propList: ['*'],
    },
  },
};

通过使用postcss-pxtorem插件，我们可以自动将CSS中的px单位转换为rem单位，从而简化适配的工作。

七、使用响应式框架和库进行适配

在移动端开发中，为了提高开发效率和代码的可维护性，我们可以使用一些响应式框架和库进行适配。例如，Bootstrap、Foundation、Tailwind CSS等框架都提供了丰富的响应式布局工具和组件，可以帮助我们快速实现响应式设计。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <p>Responsive column</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <p>Responsive column</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <p>Responsive column</p>
    </div>
  </div>
</div>

通过使用响应式框架和库，我们可以快速实现响应式布局，提高开发效率。

八、调试和优化适配效果

在实际项目中，为了确保页面在不同设备上的适配效果，我们需要进行充分的调试和优化。可以使用浏览器的开发者工具模拟不同设备的视口尺寸和分辨率，检查页面的适配效果。同时，可以利用各种在线工具（如Responsinator、BrowserStack等）进行跨设备测试，确保页面在不同设备上的表现一致。

九、总结

通过本文的介绍，我们详细探讨了如何用JavaScript动态控制rem适配移动端的各种方法和技术。包括动态设置根元素字体大小、监听窗口尺寸变化、利用viewport进行适配、使用媒体查询进行适配、结合JavaScript和媒体查询进行动态适配、使用预处理器和后处理器进行适配、使用响应式框架和库进行适配、调试和优化适配效果等。

在实际项目中，可以根据具体需求选择合适的方法和技术进行适配。同时，建议结合使用PingCode和Worktile等项目管理系统，提高团队协作效率，确保项目的顺利进行。通过不断学习和实践，我们可以更好地掌握移动端适配的技术，提高开发效率和用户体验。