CSS 面试问题

有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。 您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。

可以通过在节点上设置两个属性来完成基本着色：fill 和 stroke。 fill 设置对象内部的颜色，stroke 设置绘制在对象周围的线条的颜色。 您可以使用在 HTML 中使用的相同 CSS 颜色命名方案，无论是颜色名称（即 red）、RGB 值（即 rgb(255,0,0)）、十六进制值、RGBA 值等。

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

上面的 fill="purple" 是表现属性的一个例子。 有趣的是，与 style="fill: purple" 这样的内联样式（它也恰好是一个属性）不同，表现属性可以被样式表中定义的 CSS 样式覆盖。 因此，如果您执行类似 svg { fill: blue; } 的操作，它将覆盖已定义的紫色填充。

TL;DR

您可以通过访问 HTML 元素的 style 属性来使用 JavaScript 操作 CSS 样式。例如，要更改 id 为 myDiv 的 div 元素的背景颜色，您可以使用：

document.getElementById('myDiv').style.backgroundColor = 'blue';

您还可以使用 classList 属性添加、删除或切换 CSS 类：

document.getElementById('myDiv').classList.add('newClass');
document.getElementById('myDiv').classList.remove('oldClass');
document.getElementById('myDiv').classList.toggle('toggleClass');

使用 JavaScript 操作 CSS 样式

访问和修改内联样式

您可以使用 style 属性直接操作 HTML 元素的内联样式。此属性允许您设置单个 CSS 属性。

// Select the element
const myDiv = document.getElementById('myDiv');

// Change the background color
myDiv.style.backgroundColor = 'blue';

// Set multiple styles
myDiv.style.width = '100px';
myDiv.style.height = '100px';
myDiv.style.border = '1px solid black';

使用 classList 属性

classList 属性提供了在元素上添加、删除和切换 CSS 类的方法。这对于应用来自 CSS 文件的预定义样式很有用。

// Select the element
const myDiv = document.getElementById('myDiv');

// Add a class
myDiv.classList.add('newClass');

// Remove a class
myDiv.classList.remove('oldClass');

// Toggle a class
myDiv.classList.toggle('toggleClass');

使用 CSS 变量修改样式

可以使用 JavaScript 操作 CSS 变量（自定义属性）。这对于主题和动态样式特别有用。

// Set a CSS variable
document.documentElement.style.setProperty('--main-color', 'blue');

// Get the value of a CSS variable
const mainColor = getComputedStyle(document.documentElement).getPropertyValue(
  '--main-color',
);
console.log(mainColor);

使用外部样式表

您还可以通过动态添加或删除样式表来操作样式。

// Create a new link element
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

// Append the link element to the head
document.head.appendChild(link);

// Remove the link element
document.head.removeChild(link);

延伸阅读

• MDN Web 文档：Element.style
• MDN Web 文档：Element.classList
• MDN Web 文档：使用 CSS 自定义属性（变量）
• MDN Web 文档：Document.createElement()

CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 padding、border 和 margin 区域。

CSS 盒子模型负责计算：

• 块级元素占据多少空间。
• 边框和/或边距是否重叠或折叠。
• 盒子的尺寸。

盒子模型规则

• 块级元素的尺寸由 width、height、padding 和 border 计算。
• 如果未指定 height，则块级元素的高度将与其包含的内容一样高，再加上 padding（除非有浮动，对于浮动，请参阅 描述浮动及其工作原理）。
• 如果未指定 width，则非 float-ed 块级元素将扩展以适合其父元素的宽度减去 padding，除非它设置了 max-width 属性，在这种情况下，它将不超过指定的最大宽度。
  • 某些块级元素（例如 table、figure 和 input）具有固有的或默认的宽度值，并且可能不会扩展以填充其父容器的整个宽度。
  • 注意：span 是一个内联级元素，没有默认宽度，因此它不会扩展以适应。
• 元素的 height 由内容的 height 计算。
• 元素的 width 由内容的 width 计算。
• 默认情况下 (box-sizing: content-box)，padding 和 border 不属于元素的 width 和 height。

请注意，margin 不计入盒子的实际大小。它会影响盒子在页面上占用的总空间，但仅限于盒子外部的空间。盒子的区域在 border 处停止——它不会延伸到 margin 中。

额外

查找 box-sizing 属性，该属性会影响元素的总高度和宽度的计算方式。

• box-sizing: content-box: 这是 box-sizing 的默认值，遵循上述规则。

  例如：

  .example {
    box-sizing: content-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }

  .example 元素实际占用的空间将是 130px 宽（100px 宽度 + 10px 左内边距 + 10px 右内边距 + 5px 左边框 + 5px 右边框）。

• box-sizing: border-box: width 和 height 将包括内容、内边距和边框（但不包括外边距）。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 * { box-sizing: border-box; }，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅关于 box-sizing: border-box 的问题。

  例如：

  .example {
    box-sizing: border-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }

  该元素在页面上仍将占用 100px，但内容区域将为 70px 宽（100px - 10px 左内边距 - 10px 右内边距 - 5px 左边框 - 5px 右边框）。

边框和外边距行为

• 边框不会与相邻元素的边框折叠或重叠。每个元素的边框单独渲染。
• 外边距可以折叠，但仅垂直方向，且仅在块级元素之间。水平外边距不会折叠。这意味着如果一个块级元素具有底部外边距，而下一个块级元素具有顶部外边距，则仅使用两者中较大的一个。此行为与 box-sizing 无关，并且是 CSS 中的默认行为。

参考

• 盒子模型 | MDN

* { box-sizing: border-box; } 使页面上的每个元素都使用 box-sizing: border-box 方法来计算元素的 height 和 width。

有什么区别？

默认情况下，元素应用了 box-sizing: content-box，如果一个元素指定了 height 和 width，则只计算内容大小。box-sizing: border-box 改变了元素的 width 和 height 的计算方式，border 和 padding 也被包含在计算中。现在，一个元素的高度由内容的 height + 垂直 padding + 垂直 border 宽度计算。一个元素的宽度现在由内容的 width + 水平 padding + 水平 border 宽度计算。

下表指示了当属性具有各自的 box-sizing 时，该属性是否包含在元素的 height 和 width 的计算中：

优点

将 padding 和 border 考虑为盒子模型的一部分，这与设计师在网格中实际想象内容的方式更吻合。这是一种更直观的思考盒子的方式，因此许多 CSS 框架全局设置 * { box-sizing: border-box; }，以便所有元素默认使用这种盒子模型。

参考

• Box Sizing | CSS-Tricks

display 属性的常见值：none、block、inline、inline-block、flex、grid、table、table-row、table-cell、list-item。

有关 display 属性的完整值列表，请参阅 CSS Display | MDN。

参考资料

• CSS Display | MDN

定位元素是指其计算后的 position 属性为 relative、absolute、fixed 或 sticky 的元素。

• static：默认位置；元素将像通常一样流入页面。top、right、bottom、left 和 z-index 属性不适用。
• relative：元素的位置相对于自身进行调整，不改变布局（因此为元素留出一个间隙，就像它没有被定位一样）。
• absolute：元素从页面流中移除，并相对于其最近的已定位祖先（如果有）或相对于初始包含块定位。绝对定位的框可以有边距，并且它们不会与其他任何边距合并。这些元素不会影响其他元素的位置。
• fixed：元素从页面流中移除，并相对于视口中的指定位置定位，并且在滚动时不会移动。
• sticky：粘性定位是相对定位和固定定位的混合。该元素被视为 relative 定位，直到它穿过指定的阈值，此时它被视为 fixed 定位。

这两种方法并非相互排斥。使网站具有响应性意味着某些元素将通过调整其大小或其他功能来响应，具体取决于设备的屏幕尺寸，通常是视口宽度，例如通过 CSS 媒体查询，例如，在较小的设备上减小字体大小。

@media (min-width: 768px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .my-class {
    font-size: 12px;
  }
}

移动优先策略也具有响应性，但是它同意我们应该为移动设备设置默认值并定义所有样式，并且稍后仅为其他设备添加特定的响应式规则。 遵循前面的示例：

.my-class {
  font-size: 12px;
}

@media (min-width: 768px) {
  .my-class {
    font-size: 24px;
  }
}

移动优先策略具有以下主要优点：

• 它在移动设备上具有更高的性能，因为应用于它们的规则不必针对任何媒体查询进行验证。
• 移动优先设计更有可能在更大的设备上使用（只会显得更拉伸，但仍然可用）。 但是，反之则不然。

有四种类型的@media属性（包括screen）：

• all：适用于所有媒体类型设备
• print：适用于打印机
• speech：适用于“朗读”页面的屏幕阅读器
• screen：适用于电脑屏幕、平板电脑、智能手机等。

以下是print媒体类型用法的示例：

@media print {
  body {
    color: black;
  }
}

Float 是一个 CSS 定位属性。浮动元素仍然是页面流程的一部分，并将影响其他元素的位置（例如，文本将环绕浮动元素），这与 position: absolute 元素不同，后者将从页面流程中移除。

CSS clear 属性可用于定位在 left/right/both 浮动元素下方。

如果父元素只包含浮动元素，则其高度将折叠为零。可以通过在容器中浮动元素之后但在容器关闭之前清除浮动来修复它。

Clearfix hack

.clearfix hack 使用巧妙的 CSS 伪元素 (::after) 来清除浮动。与其在父元素上设置 overflow，不如为其应用一个额外的类 clearfix。然后应用此 CSS：

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

或者，给父元素 overflow: auto 或 overflow: hidden 属性，它将在子元素内建立一个新的块格式化上下文，它将扩展以包含其子元素。

琐事

在过去的日子里，CSS 框架（如 Bootstrap 2）使用 float 属性来实现其网格系统。然而，如今有了 CSS Flexbox 和 Grid，不再需要使用 float 属性。

参考

• Clearfix: A Lesson In Web Development Evolution

CSS 伪元素 是添加到选择器的关键字，可让您设置所选元素特定部分的样式。它们可用于装饰 (::first-line, ::first-letter) 或将元素添加到标记中（与 content: ... 结合使用），而无需修改标记 (:before, :after)。

• ::first-line 和 ::first-letter 可用于装饰文本。
• 在上面显示的 .clearfix hack 中使用，以添加一个带有 clear: both 的零空间元素。
• 工具提示中的三角形箭头使用 ::before 和 ::after。 鼓励关注点分离，因为三角形被认为是样式的一部分，而不是真正的 DOM。

笔记

• 伪元素与 伪类 不同，伪类用于根据元素的状态（例如 :hover、:focus 等）设置元素的样式。
• 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为这种区别在旧版 W3C 规范中并不明确。

参考

• 伪元素 - CSS | MDN

优点

• 主要是 "使用 CSS 预处理器的优点/缺点是什么？" 中提到的优点。
• 编写的 JavaScript 较少，这与 Node 配合得很好。

缺点

• Sass 依赖于 node-sass，它是用 C++ 编写的 LibSass 的一个绑定。 在 Node.js 版本之间切换时，必须经常重新编译该库。
• 在 Less 中，变量名以 @ 为前缀，这可能会与 @media、@import 和 @font-face 规则等原生 CSS 关键字混淆。

在 Flex 变得流行之前（大约在 2014 年），基于 float 的网格系统是最可靠的，因为它在现有的替代系统（flex、grid）中仍然拥有最多的浏览器支持。Bootstrap 一直使用 float 方法，直到 Bootstrap 4 切换到基于 flex 的方法。

如今，flex 是构建网格系统的推荐方法，并且具有 不错的浏览器支持 (99.64%)。

对于喜欢冒险的人，他们可以研究 CSS Grid Layout，它使用全新的 grid 属性。Grid 是一个基于二维网格的布局系统，而 Flexbox 是一维的。

Flexbox 主要用于一维布局，而 Grid 用于二维布局。

Flexbox 解决了 CSS 中的许多常见问题，例如在容器内垂直居中元素、粘性页脚等。著名的 CSS 框架，如 Bootstrap 和 Bulma，都基于 Flexbox，而 Flexbox 仍然是创建各种布局的经过测试和验证的方法。

Grid 适用于二维布局，让您可以完全控制行和列。它提供了一种直观而强大的方式，可以直接在 CSS 中创建复杂的基于网格的设计，通常比旧技术使用更少的代码和更大的灵活性。现在，所有主要的现代浏览器都对 Grid 提供了强大的支持，这使其成为大多数项目中布局设计的可靠选择。

一个例子是将堆叠的药丸导航转换为超过某个断点的固定底部标签导航。

首先，了解浏览器从最右侧（关键选择器）到左侧匹配选择器。 浏览器根据关键选择器过滤 DOM 中的元素，并遍历其父元素以确定匹配项。 选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。 因此，避免使用标签和通用选择器作为关键选择器。 它们匹配大量元素，浏览器将不得不做更多的工作来确定父元素是否匹配。

BEM (Block Element Modifier) 方法建议所有内容都使用单个类，并且在需要层级结构时，将其也融入到类的名称中，这自然使选择器高效且易于覆盖。

注意哪些 CSS 属性会触发回流、重绘和合成。 尽可能避免编写更改布局（触发回流）的样式。

优点

• CSS 更易于维护。
• 更容易编写嵌套选择器。
• 用于一致主题的变量。可以在不同的项目之间共享主题文件。这不一定对 CSS 自定义属性（通常称为 CSS 变量）有用。
• Mixins 用于生成重复的 CSS。
• Sass 和 Less 具有循环、列表和映射等功能，可以使配置更容易且更简洁。
• 在开发过程中将代码拆分为多个文件。CSS 文件也可以拆分，但这样做需要 HTTP 请求来下载每个 CSS 文件。

缺点

• 需要预处理工具。重新编译时间可能较慢。
• 没有编写当前和潜在可用的 CSS。例如，通过使用类似 postcss-loader 与 webpack，您可以编写潜在的未来兼容 CSS，允许您使用 CSS 变量而不是 Sass 变量。因此，您正在学习新的语法，如果/当它们标准化时，可能会有所回报。

这些技术与可访问性 (a11y) 相关。

小/零尺寸

width: 1px; height: 1px 并结合使用 CSS clip 使元素在屏幕上几乎不占用任何空间。

不建议使用 width: 0; height; 0，因为搜索引擎可能会因此受到惩罚，认为它有恶意意图，例如关键词堆砌。

绝对定位

position: absolute; left: -99999px 将把元素定位到屏幕之外。但是，根据 WebAIM 的文章：

可导航元素（例如链接和表单控件）不应隐藏在屏幕外。有视觉的用户仍然可以使用键盘导航它们，但除非对它们进行样式设置以使其在接收到键盘焦点时可见，否则他们将看不到它们。

仅当您的内容仅包含文本时才使用此方法。

文本缩进

text-indent: -9999px。这仅适用于 block 元素中的文本。与上面的绝对定位技术类似，给定此样式的可聚焦元素仍然可以聚焦，这会给使用键盘导航的视觉用户造成混淆。

错误的方法

以下方法是错误的，因为它们会向用户 和 屏幕阅读器隐藏内容，如果目的是仅向屏幕阅读器公开内容，则这是不正确的。

• display: none
• visibility: hidden
• hidden 属性

实际应用中的技术

理想情况下，建议结合上述方法，以确保它在所有浏览器中都能正常工作。

建议您使用成熟 CSS 框架中的以下方法之一，而不是实现您自己的从渲染树和 a11y 树中删除元素的方法，这些方法已经在许多网站上经过了实战测试。

Tailwind CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Bootstrap CSS

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

参考资料

• CSS in Action - Invisible Content Just for Screen Reader Users

• 空 div 方法：<div style="clear:both;"></div>。
• Clearfix 方法：参考上面的 .clearfix 类。
• overflow: auto 或 overflow: hidden 方法：父元素将建立一个新的块级格式化上下文，并扩展以包含其浮动的子元素。

在大型项目中，拥有一个实用程序 .clearfix 类将非常有帮助。如果子元素比父元素高并且不太理想，overflow: hidden 可能会剪切子元素。

• Bootstrap: 发布周期慢。Bootstrap 4 已经处于 alpha 状态将近 2 年。Bootstrap 的未来版本应该包含一个微调器按钮组件，因为它被广泛使用。
• Semantic UI: 源代码结构使得主题定制极难理解。它非传统的主题系统难以定制。供应商库中硬编码的配置路径。不像 Bootstrap 那样，不擅长覆盖变量。
• Bulma: 需要大量非语义和多余的类和标记。不向后兼容。升级版本会以微妙的方式破坏应用程序。

当多个 CSS 规则可能应用于同一个 HTML 元素时，浏览器需要一种方法来决定哪个规则优先。这由 CSS 级联 决定，它考虑了重要性、内联样式、选择器特异性和源顺序。选择器特异性 是此过程的关键部分，它为每个选择器计算一个权重。

浏览器根据与元素匹配的 CSS 规则的 特异性 来确定要在元素上显示哪些样式。为每个规则计算特异性，以决定哪个规则优先。

如何计算特异性？

特异性算法基本上是一个由三个类别或权重组成的三个值 - ID、CLASS 和 TYPE - 对应于三种类型的选择器。该值表示每个权重类别中选择器组件的计数，并写为 ID - CLASS - TYPE。这三列是通过计算与元素匹配的选择器中每个选择器权重类别的选择器组件的数量来创建的。

1. ID：这是 ID 选择器的计数（例如，#example）。
2. CLASS：这是类选择器的计数（例如，.my-class）、属性选择器（例如，[type="radio"]）和伪类（例如，:hover）。
3. TYPE：这是类型选择器（元素名称，例如，h1、div）和伪元素（例如，::before）的计数。

当比较选择器以确定哪个选择器具有最高的特异性时，从左到右（ID，然后是 CLASS，然后是 TYPE）查看，并比较每列中的最高值。ID 列中的值将覆盖 CLASS 和 TYPE 列中的值，无论它们有多大。类似地，CLASS 列中的值将覆盖 TYPE 列中的任何值。例如，1,0,0（一个 ID）的特异性大于 0,10,10（十个类和十个类型）。

重要的是要记住，特异性是更广泛的 CSS 级联 的一部分。标记为 !important 的声明具有最高的优先级，其次是内联样式（使用 style 属性）。选择器特异性紧随其后。

在竞争规则之间 特异性相等 的情况下（不是内联或 !important），CSS 源顺序中 最后 出现的规则是有效的规则，并将被应用。

最好编写具有低特异性的 CSS 规则，以便在必要时可以轻松覆盖它们。在为 UI 组件库编写 CSS 时，重要的是样式具有较低的特异性，以便库的用户可以自定义它们，而无需使用过于复杂的选择器或求助于 !important。

参考

• 特异性 | MDN
• 特异性 | web.dev

块格式化上下文 (BFC) 是网页视觉 CSS 渲染的一部分，其中会布局块级盒子。浮动、绝对定位的元素、inline-blocks、table-cells、table-caption 以及 overflow 值不为 visible 的元素（除非该值已传播到视口）会建立新的块格式化上下文。

了解如何建立块格式化上下文非常重要，因为如果不这样做，包含框将不会包含浮动子元素。这类似于折叠边距，但更隐蔽，因为您会发现整个框以奇怪的方式折叠。

BFC 是满足以下至少一个条件的 HTML 盒子：

• float 的值不为 none。
• position 的值既不是 static 也不是 relative。
• display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex、grid 或 inline-grid。
• overflow 的值不为 visible。

在 BFC 中，每个盒子的左外边缘都与包含块的左边缘接触（对于从右到左的格式，右边缘接触）。

在同一个 BFC 内的相邻块级盒子之间的垂直外边距可以折叠，但是 BFC 阻止了它与外部元素的边距折叠。 进一步阅读 外边距折叠。

CSS 中的 z-index 属性控制重叠元素的垂直堆叠顺序。z-index 仅影响已定位的元素（具有 position 值不为 static 的元素）及其后代或 flex 项目。

在没有任何 z-index 值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（在同一层级中，最下面的元素出现在最上面）。具有非静态定位的元素（及其子元素）将始终出现在具有默认静态定位的元素之上，而不管 HTML 层次结构如何。

堆叠上下文是包含一组层的元素。在局部堆叠上下文中，其子元素的 z-index 值是相对于该元素设置的，而不是相对于文档根元素。该上下文之外的层——即局部堆叠上下文的同级元素——不能位于其内的层之间。如果元素 B 位于元素 A 的顶部，而元素 A 的子元素 C 永远不能高于元素 B，即使元素 C 的 z-index 比元素 B 高。

每个堆叠上下文都是自包含的 - 在元素的content堆叠后，整个元素被认为在父堆叠上下文的堆叠顺序中。少数 CSS 属性会触发新的堆叠上下文，例如 opacity 小于 1、不是 none 的 filter 以及不是 none 的 transform。

注意：确切地说，什么元素有资格创建堆叠上下文，列在规则的这一长串中。

CSS 精灵将多个图像组合成一个更大的图像文件，并使用 CSS background-image、background-position 和 background-size 的组合来选择更大图像的特定部分作为所需的图像。

它曾经是一种常用的图标技术（例如 Gmail 对其所有图像都使用精灵图）。

优点

• 减少多个图像的 HTTP 请求数量（每个精灵表只需要一个请求）。但使用 HTTP2，加载多个图像不再是一个大问题。
• 预先下载在需要之前不会下载的资产，例如仅在 :hover 伪状态下出现的图像。不会看到闪烁。

如何实现

1. 使用精灵图生成器将多个图像打包成一个，并为其生成相应的 CSS。
2. 每个图像都将有一个对应的 CSS 类，其中定义了 background-image 和 background-position 属性。
3. 要使用该图像，请将相应的类添加到您的元素中。

生成的样式表可能如下所示：

.icon {
  background-image: url('https://example.com/images/spritesheet.png');
  width: 24px;
  height: 24px;
}

.icon-cart {
  background-position: 0 0;
}

.icon-arrow {
  background-position: -24px 0;
}

并且可以在 HTML 中这样使用：

<span class="icon icon-cart"></span>

<span class="icon icon-arrow"></span>

参考

• 在 CSS 中实现图像精灵 - CSS：层叠样式表 | MDN

这个问题与关于 编写高效 CSS 的问题相关。浏览器从最右侧（关键选择器）到左侧匹配选择器。浏览器根据关键选择器过滤 DOM 中的元素，并向上遍历其父元素以确定匹配项。选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。

例如，对于选择器 p span，浏览器首先找到所有 <span> 元素，并向上遍历其父元素，直到根元素，以找到 <p> 元素。对于特定的 <span>，一旦找到 <p>，它就知道 <span> 与选择器匹配，并且可以停止遍历其父元素。

Retina 只是一个营销术语，指的是像素比大于 1 的高分辨率屏幕。需要知道的关键是，使用像素比意味着这些显示器正在模拟较低分辨率的屏幕，以便以相同的大小显示元素。如今，我们认为所有移动设备都是 retina 默认显示器。

默认情况下，浏览器会根据设备分辨率渲染 DOM 元素，但图像除外。

为了获得清晰、美观的图形，充分利用视网膜显示器，我们需要尽可能使用高分辨率图像。但是，始终使用最高分辨率的图像会影响性能，因为需要通过网络发送更多字节。

为了克服这个问题，我们可以使用 HTML5 中指定的响应式图像。它要求向浏览器提供相同图像的不同分辨率文件，并让它决定哪张图像最好，使用 html 属性 srcset 和可选的 sizes，例如：

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

重要的是要注意，不支持 HTML5 的 srcset 的浏览器（即 IE11）将忽略它并使用 src。如果我们真的需要支持 IE11 并且出于性能原因希望提供此功能，我们可以使用 JavaScript polyfill，例如 Picturefill。

对于图标，尽可能使用 SVG，因为它们无论分辨率如何都能非常清晰地渲染。

技术

• 优雅降级：为现代浏览器构建应用程序，同时确保它在旧浏览器中仍能运行的实践。
• 渐进增强：为基本用户体验构建应用程序，但在浏览器支持时添加功能增强的实践。
• 使用 caniuse.com 检查功能支持。
• Autoprefixer 用于自动插入供应商前缀。
• 使用 Modernizr 进行功能检测。
• 通过 `@support`` 使用 CSS 功能查询

响应式设计和自适应设计都试图优化不同设备上的用户体验，针对不同的视口大小、分辨率、使用上下文、控制机制等进行调整。

响应式设计基于灵活性原则——一个可以在任何设备上看起来都不错的单一流畅网站。响应式网站使用媒体查询、灵活的网格和响应式图像来创建一种用户体验，这种体验会根据多种因素进行调整和改变。就像一个球变大或变小以适应几个不同的圆环。

自适应设计更像是渐进增强的现代定义。自适应设计不是一个灵活的设计，而是检测设备和其他功能，然后根据预定义的一组视口大小和其他特征提供适当的功能和布局。该网站检测所使用的设备类型，并为该设备提供预设的布局。与其让一个球穿过几个不同大小的圆环，不如根据圆环的大小使用几个不同的球。

这两种方法都有一些需要权衡的问题：

• 响应式设计可能非常具有挑战性，因为您本质上是使用一个单一的（尽管是响应式的）布局来适应所有情况。如何设置媒体查询断点就是一个这样的挑战。您是使用标准化的断点值吗？或者，您是使用对您的特定布局有意义的断点吗？如果该布局发生变化怎么办？
• 自适应设计通常需要用户代理嗅探或 DPI 检测等，所有这些都可能被证明是不可靠的。

• 在确定问题和有问题的浏览器后，使用仅在特定浏览器使用时加载的单独样式表。但是，此技术需要服务器端渲染。
• 使用 Bootstrap 等已经为您处理这些样式问题的库。
• 使用 autoprefixer 自动将供应商前缀添加到您的代码中。
• 使用 Reset CSS 或 Normalize.css。
• 如果您正在使用 PostCSS（或类似的 CSS 转译库），可能存在允许您选择使用现代 CSS 语法（甚至 W3C 提案）的插件，这些插件会将代码的这些部分转换为等效的向后兼容代码，这些代码将在您使用的目标中起作用。

translate() 是 CSS transform 属性的一个可能值。使用 translate() 时，元素仍然占据其原始空间（有点像 position: relative）。但是，当更改元素的绝对定位时，元素将从页面流中移除，并且周围元素的位置将受到影响。因此，将不得不重新计算页面布局。

更改 transform 或 opacity 不会触发浏览器回流或重绘，但会触发合成；另一方面，更改绝对定位会触发“回流”。transform 会导致浏览器为该元素创建一个 GPU 层，但更改绝对定位属性会使用 CPU。因此，translate() 更有效，并且将导致更短的绘制时间，从而实现更流畅的动画。

选择哪个以及为什么？

当您需要一个非常定制或非传统的网站设计时，请选择重置，这样您就需要做很多自己的样式，并且不需要保留任何默认样式。