面试题：CSS渐进增强与优雅降级在布局中的应用

Question

请描述在一个响应式网页布局中，如何分别运用CSS渐进增强与优雅降级的思路来处理不同设备屏幕尺寸的显示效果，并举例说明你会使用哪些CSS属性来实现。

Answer 1

渐进增强

1. 思路：从最基本的、所有设备都能支持的样式开始构建，然后逐步为更高级的、具备更好性能和特性的设备添加额外的样式和功能。先确保内容的可访问性和基本布局在所有设备上都能正常工作，再针对特定设备（如大屏幕、高分辨率设备）进行优化，以提供更好的用户体验。
2. 举例：
   • 基本布局：使用box-sizing: border-box确保盒模型计算统一，在所有设备上都能正确显示元素尺寸。设置width和height属性来定义元素基础尺寸，例如：

div {
    box-sizing: border-box;
    width: 100%;
    height: auto;
}

- **适配大屏幕**：当屏幕宽度达到一定值（例如1200px），通过媒体查询添加更复杂的布局和样式，如`flexbox`或`grid`布局。

@media (min - width: 1200px) {
    .container {
        display: flex;
        justify-content: space - between;
    }
}

- **高分辨率设备**：对于高分辨率屏幕，可以使用`background - size: cover`来优化背景图片显示，让图片在高清屏幕上更清晰美观。

@media (min - resolution: 2dppx) {
    body {
        background - image: url('high - res - image.jpg');
        background - size: cover;
    }
}

优雅降级

1. 思路：先为最新、功能最强大的浏览器和设备构建完整、丰富的用户体验，然后针对那些不支持某些高级特性的旧设备或低性能设备，通过检测和处理，逐步去除或替换那些无法支持的功能和样式，以保证页面仍然可用。
2. 举例：
   • 初始布局（高端设备）：使用display: grid来创建复杂的网格布局，例如：

.container {
    display: grid;
    grid - template - columns: repeat(3, 1fr);
    grid - gap: 20px;
}

- **适配不支持grid的设备**：通过媒体查询和特性检测，对于不支持`grid`布局的旧设备，改用`float`布局。

@supports not (display: grid) {
    .container {
        width: 100%;
    }
    .container div {
        float: left;
        width: 33.33%;
        box - sizing: border - box;
        padding: 10px;
    }
}

- **处理旧浏览器的样式**：对于一些旧浏览器可能不支持的CSS3属性，如`border - radius`，可以通过提供备用样式来优雅降级。

div {
    border - radius: 10px;
    /* 备用样式 */
    -moz - border - radius: 10px;
    -webkit - border - radius: 10px;
}