javascript用rem来做响应式开发-前端开发

当我们设计响应式开发的网站时，经常需要根据不同的屏幕尺寸来调整页面元素的大小。一种解决方案是使用JavaScript来计算和设置元素的大小，而使用rem（根据根元素字体大小而定的相对单位）可以使我们轻松实现响应式开发。以下是使用JavaS

当我们设计响应式开发的网站时，经常需要根据不同的屏幕尺寸来调整页面元素的大小。一种解决方案是使用JavaScript来计算和设置元素的大小，而使用rem（根据根元素字体大小而定的相对单位）可以使我们轻松实现响应式开发。以下是使用JavaScript和rem进行响应式设计的攻略：

第一步：在HTML文档的头部设置根元素字体大小

为了计算和设置rem单位，我们需要为根元素设置字体大小。我们可以在HTML文档的头部使用样式标签将根元素的字体大小设置为一个固定值，例如16像素：

<head>
  <meta charset="UTF-8">
  <title>My Responsive Website</title>
  <style>
    html {
      font-size: 16px;
    }
  </style>
</head>

第二步：计算和设置元素的大小

我们可以使用JavaScript来计算和设置元素的大小。假设我们想要在一个网格中显示3个等宽的方框，无论屏幕大小如何，每个方框应该占据网格的1/3宽度。我们可以使用下面的JavaScript代码：

// 在文档加载完成后运行函数
window.onload = function() {
  // 获取网格
  var grid = document.querySelector('.grid');
  // 获取网格宽度
  var gridWidth = grid.offsetWidth;
  // 计算一个方框应该占据的宽度
  var boxWidth = gridWidth / 3;
  // 将方框的宽和高设置为计算出的值
  var boxes = document.querySelectorAll('.box');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.width = boxWidth + 'px';
    boxes[i].style.height = boxWidth + 'px';
  }
}

在这个例子中，我们首先通过document.querySelector方法获取了名为grid的元素，这是一个带有3个方框的网格容器。然后，我们使用offsetWidth属性获取网格的宽度。接下来，我们将网格宽度除以3，得到每个方框应该占据的宽度。最后，我们将width和height样式属性设置为计算出的值。这样，无论屏幕大小如何，三个方框始终会平均分配网格宽度。

示例1

比如有这么一个需求，在不同的屏幕尺寸下，我们想要显示不同数量的卡片，这时，我们可以采用JavaScript和rem进行处理。我们设置每个卡片所占据的rem大约为12，即一个卡片的宽度高度都是12rem，然后动态根据屏幕宽度计算卡片的数量，并动态地插入到HTML中，如下所示：

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Responsive Website</title>
    <style>
      html {
        font-size: 16px;
      }
      .card {
        width: 12rem;
        height: 12rem;
        margin: 1rem;
        background-color: #ccc;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="card-container"></div>
    <script>
      function createCards(num) {
        var container = document.getElementById('card-container');
        // 清空卡片容器
        container.innerHTML = '';
        // 动态插入卡片
        for (var i = 0; i < num; i++) {
          var card = document.createElement('div');
          card.className = 'card';
          container.appendChild(card);
        }
      }
      // 在文档加载完成后运行函数
      window.onload = function() {
        // 根据屏幕宽度计算卡片数量
        var screenWidth = window.innerWidth;
        var cardNum = Math.floor(screenWidth / 144);
        // 创建卡片
        createCards(cardNum);
        // 监听窗口大小改变事件
        window.addEventListener('resize', function() {
          // 根据新的屏幕宽度重新计算卡片数量
          var screenWidth = window.innerWidth;
          var cardNum = Math.floor(screenWidth / 144);
          // 重新创建卡片
          createCards(cardNum);
        });
      }
    </script>
  </body>
</html>

在这个例子中，我们将每个卡片的宽度和高度都设置为12rem，然后根据屏幕宽度计算卡片的数量，动态地插入到HTML中。我们还添加了一个resize事件监听器，以便在窗口大小改变时更新卡片数量。

示例2

另一个常见的使用JavaScript和rem进行响应式开发的例子是使用rem来设置页面字体大小。我们可以使用下面的JavaScript代码根据屏幕宽度动态设置根元素的字体大小：

// 在文档加载完成后运行函数
window.onload = function() {
  // 根据屏幕宽度动态设置根元素字体大小
  var screenWidth = window.innerWidth;
  var fontSize = screenWidth / 20;
  document.documentElement.style.fontSize = fontSize + 'px';
  // 监听窗口大小改变事件
  window.addEventListener('resize', function() {
    // 根据新的屏幕宽度重新计算字体大小
    var screenWidth = window.innerWidth;
    var fontSize = screenWidth / 20;
    document.documentElement.style.fontSize = fontSize + 'px';
  });
}

在这个例子中，我们根据屏幕宽度计算字体大小，然后将它设置为根元素的字体大小。我们还添加了一个resize事件监听器，以便在窗口大小改变时更新字体大小。

通过上述的两个实例，我们可以发现使用JavaScript和rem来进行响应式开发，可以帮助我们轻松地实现各种常见的响应式布局和设计需求，进而提高网站的用户体验。