探索CSS响应式设计：从原理到实战

大家好 ,我是一名在校大二学生 , 今天，我们探索一下CSS响应式设计中的一些核心要点 : px与rem的区别、实践应用以及优化技巧

稳扎稳打 , 步步为营 😏

CSS的响应式设计是一项关键技术，它能够确保我们的网页在各种不同的设备上都能展现出出色的用户体验。

PX与REM：深入理解长度单位

PX的特性

PX作为绝对长度单位，它始终对应着固定的物理像素值。

这意味着，无论在何种设备或浏览器设置下，以px定义的元素大小都将保持不变。

例如，我们设定一个元素的宽度为200px，那么在任何屏幕上，它所占据的物理像素数量都是固定的200个。这种特性在某些特定场景下 是有用的，比如对于一些需要精确像素控制的图标或者固定尺寸的元素。

然而，在响应式设计中，它也可能带来一些挑战。假设我们设计了一个宽度为800px的页面布局，在小屏幕设备上，由于其固定的像素大小，可能会导致内容溢出或者显示不全的问题。

REM的优势

REM则是相对长度单位 ，它的大小基于HTML文档的根元素 （标签）的字体大小。

通常情况下，浏览器默认的根元素字体大小为16px，所以1rem就等于16px。

通过调整根元素的font-size属性，我们可以轻松地对整个页面的元素进行缩放，从而实现对不同屏幕尺寸的适配。

以下是一个简单的示例，展示了如何使用rem来创建一个自适应的布局：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REM Example</title>

  <style>
    html {
      font-size: 16px; /* 设置根元素字体大小为16px，此时1rem = 16px */
    }
   .box {
      width: 10rem; /* 宽度为10rem，根据根元素字体大小计算实际宽度 */
      height: 5rem;
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <div class="box"></div>

</body>

</html>

在上述代码中，我们定义了一个类名为.box的元素，其宽度和高度分别为10rem和5rem。

当根元素字体大小为16px时，该元素的实际宽度将为160px（10 * 16），高度为80px（5 * 16）。

如果我们在不同屏幕宽度 的设备上访问这个页面，通过调整根元素的字体大小 ，.box元素的尺寸将相应地进行缩放，从而适应不同的屏幕尺寸。

我们来看看 :

响应式设计实践应用

双栏布局案例

在实际项目中，双栏布局是一种常见的页面结构。

让我们来看一个如何使用rem和flex布局 实现双栏布局的案例：

html 复制代码

<!DOCTYPE html>
<!-- 设置了根元素的字体大小为75px -->
<html lang="en" style="font-size: 75px;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双栏布局</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
   .container {
      display: flex;
      justify-content: space-between;
    }
   .column {
      width: 5rem; /* 根据前面设置的根字体大小，这里的5rem相当于375px */
      height: 2rem;
      background-color: green;
      font-size: 20px;
      color: white;
      text-align: center;
      line-height: 2rem;
    }
   .column +.column {
      background-color: pink;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="column">左侧栏</div>

    <div class="column">右侧栏</div>

  </div>

</body>

</html>

在这个例子中，我们首先设置了根元素的字体大小为75px

html 复制代码

<html lang="en" style="font-size: 75px;">

然后，使用flex布局创建了一个容器（.container），并将其内部的两个子元素（.column）设置为等宽的双栏布局。

通过将宽度设置为5rem，根据当前根元素字体大小，这两个栏目的宽度将自适应屏幕宽度，在不同设备上都能保持合适的比例。

同时，我们还为栏目设置了背景颜色、文字样式等，使其在视觉上更加美观。

实际效果如下 :

自动计算font - size函数

为了实现更精确的响应式设计 ，我们可以通过JavaScript动态计算根元素的font-size。

下面是一个使用立即执行函数（IIFE）定义的calc函数来实现自动计算的示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动计算font-size</title>

  <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

  </style>

  <script>
    (function () {
      function calc() {
        const w = document.documentElement.clientWidth;
        const f = document.documentElement.clientWidth;
        // 1rem = 75px
        document.documentElement.style.fontSize = 75 * (f / 750) + 'px';
        console.log(w);
      }
      // 页面加载时立即执行calc函数
      calc();
      // 监听窗口大小变化事件，当设备尺寸改变时重新计算font-size
      window.onresize = function () {
        calc();
      };
    })();
  </script>

</head>

<body>
  <!-- 页面内容 -->
   <div style="width: 200px;height: 200px;background-color: green;font-size: 20px;color: white;display: inline-block;"></div>
   <div style="width: 300px;height: 200px;background-color: pink;display: inline-block;"></div>
</body>

</html>

在上述代码中，calc函数获取了文档的可视宽度

document.documentElement.clientWidth

并根据一个预设的比例（75 * (f / 750)）来计算根元素的字体大小。

当页面加载时，calc函数会立即执行一次，设置初始的字体大小。

同时，我们还监听了window.onresize事件，当用户调整浏览器窗口大小 或者设备横竖屏切换时，会再次调用calc函数，重新计算并更新根元素的字体大小，从而实现页面元素的自动适配。

下面是横竖屏切换的场景

优化自动刷新

虽然我们已经实现了根据屏幕宽度自动调整字体大小 ，但在实际使用中，可能会发现当设备从横屏切换到竖屏或者反之，页面并没有立即刷新适配。

为了解决这个问题，我们使用防抖函数进一步优化代码，确保页面在设备尺寸变化时能够及时刷新。

以下是优化后的代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优化自动刷新</title>

  <style>
     /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
  </style>

  <script>
    (function () {
      function calc() {
        const w = document.documentElement.clientWidth;
        const f = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = 75 * (f / 750) + 'px';
        console.log(w);
      }
      // 立即执行calc函数
      calc();
      // 优化后的窗口大小变化事件处理函数
      window.addEventListener('resize', function () {
        // 使用防抖函数来控制计算频率，避免频繁计算
        if (!this.resizeTimer) {
          calc();
          this.resizeTimer = setTimeout(() => {
            this.resizeTimer = null;
          }, 2000);
        }
      });
    })();
  </script>

</head>

<body>
   <!-- 页面内容 -->
   <div style="width: 200px;height: 200px;background-color: green;font-size: 20px;color: white;display: inline-block;"></div>
   <div style="width: 300px;height: 200px;background-color: pink;display: inline-block;"></div>
</body>

</html>

在这个优化版本中，我们使用了防抖函数的概念。

当窗口大小发生变化时，resize事件会被频繁触发，但我们不希望每次触发都立即执行calc函数，因为这样会消耗过多的性能。

通过设置一个resizeTimer变量，我们可以控制在一定时间内（这里是2秒）只执行一次calc函数。

这样，既能保证页面在设备尺寸变化时及时刷新适配 ，又能避免不必要的性能开销。

总结

通过

px与rem的区别
双栏布局案例
自动计算font-size函数
以及优化自动刷新等方面的详细讲解

我们深入了解了CSS响应式设计的核心要点。

在实际项目中，灵活运用这些技术能够使我们的网页在各种设备上都能呈现出良好的布局和用户体验。

然而，CSS响应式设计还有许多其他的技巧和最佳实践等待我去探索。

例如，如何更好地处理图片在不同分辨率下的显示问题，如何结合媒体查询实现更复杂的布局切换，以及如何优化CSS代码以提高性能等。

看来 , 道阻且长 ~

倔友们 , 可否点赞收藏加关注 ~

欢迎大家一起来评论区交流 ~