当面试被问到弹性布局与视口单位

来点vc
150 阅读12分钟

在多设备、多尺寸的互联网世界中，创建可以在任何屏幕上都能完美展现的网页成为了一种挑战。弹性布局领域的REM和视口单位作为响应式设计的两个关键工具，为这一挑战提供了解决方案。让我们深入了解它们的概念、应用、局限性以及如何解决常见问题。

REM

REM，意为“根元素的字体大小”，是一个CSS单位，相对于HTML根元素（<html>）的字体大小。如果根元素的字体大小是16px（浏览器默认值），那么 1rem 等于16px，如果是100px，那么1rem等于100px。

html {
  font-size: 16px; /* 这是根元素的字体大小 */
}

p {
  font-size: 1.5rem; /* 等于24px */
}

在上述示例中，<p> 标签的字体大小是根元素字体大小的1.5倍，也就是24px。

REM布局实现方案

使用 rem 适配的原理就是我们只需要在设备宽度大小变化的时候，调整 html 的字体大小，那么页面上所有使用 rem 单位的元素都会相应的变化。 实践中，为了更好地适应不同屏幕，我们会通过JavaScript动态设置根元素的字体大小。

function setRemUnit() {
  var remBase = 100; // 在设计稿为750px宽时，1rem等于100px
  var designWidth = 750; // 设计稿的宽度
  var minWidth = 320; // 最小视口宽度
  var maxWidth = 1200; // 最大视口宽度

  // 根据设计稿的比例计算出在最小宽度和最大宽度下rem的基准值
  var minRem = (minWidth / designWidth) * remBase;
  var maxRem = (maxWidth / designWidth) * remBase;

  var width = document.documentElement.clientWidth || window.innerWidth;
  var currentRem = (width / designWidth) * remBase;

  // 限制currentRem的范围在minRem到maxRem之间
  currentRem = Math.min(maxRem, Math.max(minRem, currentRem));

  document.documentElement.style.fontSize = currentRem + 'px';
}

// 初始化
setRemUnit();

// 当窗口尺寸变化或者设备旋转时，重新设置rem
window.addEventListener('resize', setRemUnit);
window.addEventListener('orientationchange', setRemUnit);

这段代码会将1rem设置为屏幕宽度的一定比例。当屏幕宽度正好为750px时，1rem将等于100px。如果屏幕宽度变大或变小，根元素的font-size将会相应地缩放，以保持设计的尺寸比例。

请注意，当屏幕宽度非常小或非常大时，这可能会导致文本大小不适合阅读。因此，通常情况下，我们需要在设置边界，即最小和最大的字体大小限制。

REM布局的常见问题

  1. 兼容性问题：虽然现代浏览器都支持rem单位，但在一些旧的浏览器中可能不完全支持或表现不一致。

  2. 细粒度控制的缺失：使用rem单位可能会使得对于某些元素的尺寸控制不够精细。例如，如果你希望元素的大小精确地基于其父元素，而不是根元素，使用rem就会比较困难。

  3. 计算复杂性：在编写CSS时，计算rem值可能会比使用像素(px)更复杂，特别是当你尝试对接设计师提供的以像素为单位的设计稿时。

  4. 缩放不均匀：有时设计要求某些元素（如边框或阴影）不应随着根字体大小缩放，或者缩放比例不同，这时使用rem就不太方便。

  5. JavaScript依赖：如果使用JavaScript动态计算根元素的字体大小，那么当JavaScript被禁用或加载失败时，布局可能会出现问题。

  6. 用户设置的字体大小：用户可能在浏览器中设置了默认的字体大小，这可能会影响到使用rem单位的元素的实际大小，从而导致布局问题。

  7. 媒体查询的限制：虽然rem单位可以在媒体查询中使用，但有时基于像素的媒体查询能提供更精确的控制。

  8. 字体大小继承问题：一些浏览器在计算rem值时可能不考虑用户缩放设置，这可能会导致可访问性问题。

解决这些问题通常需要结合使用其他单位和技术。例如，可以结合使用em、px、百分比(%)、视口单位(vw/vh)，甚至CSS变量来解决特定的布局挑战。此外，使用现代CSS功能如CSS Grid和Flexbox也可以在不依赖rem单位的情况下创建复杂的响应式布局。

postcss-pxtorem

postcss-pxtorem是一个PostCSS插件，它解决了开发者在编写CSS时需要手动将像素单位转换为rem单位的问题。这样的转换有助于实现响应式设计，因为rem单位相对于根元素的字体大小，可以通过改变根元素的字体大小来统一调整整个应用或网站的尺寸。

解决的问题

  1. 自动化转换：开发者可以直接用像素单位编写CSS，postcss-pxtorem会自动将这些像素单位转换为相应的rem单位。
  2. 提高效率：避免了手动计算像素到rem的转换，节省时间，减少出错。
  3. 保持一致性：确保整个项目中rem单位的使用是一致的，便于维护。
  4. 可配置性：可以根据设计稿的基准宽度来设置转换的基准值，使得转换更加符合设计需求。

原理

postcss-pxtorem工作原理是通过PostCSS这个CSS处理平台来解析CSS文件，然后根据配置的规则将找到的像素单位转换为rem单位。转换过程遵循以下步骤：

  1. 解析CSS：PostCSS解析CSS文件，生成抽象语法树（AST）。
  2. 查找像素单位：插件遍历AST，查找所有的像素单位（px）。
  3. 计算转换值：根据配置的根字体大小，将像素单位转换为rem。例如，如果根字体大小是16像素，那么1px将被转换为1/16rem。
  4. 替换单位：将计算后的rem值替换原来的像素值。
  5. 输出CSS：生成新的CSS代码，其中的像素单位都已经转换为rem单位。

使用方法

要使用postcss-pxtorem，首先需要安装PostCSS和该插件，然后在PostCSS的配置文件中配置该插件。例如：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 根元素字体大小
      unitPrecision: 5, // 转换后的rem值保留的小数位数
      propList: ['*'], // 可以从px更改为rem的属性列表
      selectorBlackList: [], // 忽略的选择器，保留为px
      replace: true, // 替换包含px的规则
      mediaQuery: false, // 是否允许在媒体查询中转换px
      minPixelValue: 0 // 设置要替换的最小像素值
    }
  }
};

视口单位

视口单位是相对于视口大小的长度单位，无论设备或者窗口的大小如何变化，它们都能保持元素尺寸的灵活性和适应性。最常用的视口单位包括：

  • vw（视口宽度）：1vw等于视口宽度的1%。
  • vh（视口高度）：1vh等于视口高度的1%。
  • vmin（视口宽度和高度中较小的那个）：1vmin等于当前vw和vh中较小的那个的1%。
  • vmax（视口宽度和高度中较大的那个）：1vmax等于当前vw和vh中较大的那个的1%。

视口单位布局实现方案

使用视口单位进行布局时，你可以直接将元素的尺寸与视口的尺寸关联起来。下面是一些常见的使用视口单位的方案示例：

全屏部分

.fullscreen-section {
  width: 100vw; /* 视口宽度的100% */
  height: 100vh; /* 视口高度的100% */
}

这将创建一个宽度和高度都占满整个视口的元素。

响应式字体大小

.responsive-text {
  font-size: 5vw; /* 字体大小为视口宽度的5% */
}

这将创建一个随着视口宽度变化而变化的字体大小。

等比例容器

.aspect-ratio-box {
  width: 50vw;
  height: 25vw; /* 高度是宽度的一半 */
}

这将创建一个宽度是视口宽度一半，高度是宽度一半的容器，保持2:1的宽高比。

视口单位布局的常见问题

小屏幕上导致元素太小

在小屏幕上，使用视口单位可能会使得文字或者元素过小，影响可读性和可用性。

解决方案：

使用媒体查询来设置一个最小字体大小。

.responsive-text {
  font-size: 5vw;
}

@media (max-width: 400px) {
  .responsive-text {
    font-size: 20px; /* 小屏幕上不使用vw，改用固定的像素大小 */
  }
}

大屏幕上导致元素太大

在大屏幕上，视口单位可能会使得元素尺寸过大，超出用户的视线范围。

解决方案：

同样使用媒体查询来限制最大尺寸。

.responsive-text {
  font-size: 5vw;
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 60px; /* 大屏幕上设置一个最大字体大小 */
  }
}

滚动条问题

在某些情况下，使用100vw可能会导致水平滚动条的出现，因为它没有考虑滚动条的宽度。

解决方案：

使用width:100%代替width:100vw可以避免滚动条问题。

.fullwidth-section {
  width: 100%; /* 而不是100vw */
}

缩放页面时的布局问题

用户缩放页面时，使用视口单位的元素可能不会如预期般缩放，特别是在移动设备上。

解决方案：

暂时没有完美的解决方案，开发者需要在使用视口单位时权衡这个问题，或者通过JavaScript监听resize事件来调整布局。

window.addEventListener('resize', function() {
  // 动态调整元素大小或字体大小的代码
});

REM单位与视口单位的比较

  1. 相对参照点不同：

    • REM单位是相对于根元素（<html>）的字体大小来设置的。
    • 视口单位是直接相对于浏览器窗口（视口）的尺寸。

  2. 适应性：

    • REM通常用于字体大小、间距和尺寸，它允许用户通过浏览器设置来更改字体大小，从而影响布局。
    • 视口单位适用于需要直接根据视口尺寸变化的布局，如全屏背景图、等比例元素和某些响应式布局。

  3. 缩放行为：

    • REM单位的缩放基于根元素字体大小，通常在页面加载时通过JavaScript计算一次，可能需要监听窗口尺寸变化来更新REM值。
    • 视口单位的缩放是自动的，随着视口的变化实时更新，不需要额外的JavaScript来处理尺寸变化。

  4. 兼容性：

    • REM单位在所有现代浏览器中都得到很好的支持。
    • 视口单位也得到广泛支持，但在一些老旧的浏览器上可能存在兼容性问题。

  5. 易用性和控制性：

    • REM单位对于基于字体大小的布局控制更为方便，特别是在组件和模块化设计中。
    • 视口单位可能会导致在小屏幕上元素过小或在大屏幕上过大的问题，需要额外的媒体查询来细致控制。

Flexbox

Flexbox（Flexible Box Layout Module）也属于弹性布局的范畴。其主要思想是让容器能够改变其子项的宽度、高度（甚至顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器的子元素可以在任何方向上平均分配空间，这使得flexbox成为构建复杂布局和对齐内容的理想选择，特别是当你不确定容器大小或者动态内容时。

.container {
  display: flex; /* 设置flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 容器高度 */
}

.item {
  flex: 1; /* flex项目将占据可用空间 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在这个例子中，.container 是一个flex容器，它的直接子元素 .item 会平均分配容器的空间，并且居中显示。

Flexbox的优势

  1. 容器方向：Flexbox允许你指定子元素的布局方向（行或列）。
  2. 顺序：可以改变子元素的视觉顺序，而不影响HTML源代码的顺序。
  3. 对齐：可以在主轴和交叉轴上对齐子元素，非常适合对齐操作。
  4. 灵活性：子元素可以设置为不同的灵活性，以允许它们成比例地占据空间或根据内容自适应。

Flexbox的局限性

尽管Flexbox提供了强大的布局能力，但它主要是一维布局模型，用于在一个方向上（要么是行要么是列）布局项目。对于更复杂的二维布局（同时处理行和列），CSS Grid Layout可能是更好的选择。

总结来说，Flexbox确实是弹性布局的一种形式，它专注于在一维空间内提供灵活的布局解决方案。而REM和视口单位通常与CSS长度单位相关，用于设置字体大小、宽度、高度等属性，与Flexbox一样，它们也可以用于实现响应式设计。

结语

  • REM：更适合于文本内容、组件尺寸和布局网格，因为它们通常需要维持与字体大小的关系。
  • 视口单位：更适合于创建全屏容器、高度响应的布局或视觉展示效果，如横幅、幻灯片和视频背景。

总的来说，REM单位和视口单位都是创建弹性布局的有效工具，但它们各有优势和适用的场景。在实际应用中，开发者往往会根据项目需求和设计目标，灵活选择或者结合使用这两种单位。

avatar
文章
阅读
粉丝