面试题：实现一个支持渐进增强的 CSS 响应式布局

Question

假设你要开发一个多页面网站，要求在现代浏览器上实现流畅的响应式布局，同时旧版浏览器也能基本展示内容。请描述实现思路，并给出关键的 CSS 代码示例，包含不同屏幕尺寸下的布局调整及针对旧版浏览器的兼容处理。

Answer 1

实现思路

1. 使用CSS媒体查询：通过媒体查询检测不同屏幕尺寸，针对不同尺寸范围设置相应的布局样式，以实现响应式布局。
2. 渐进增强：先编写基础的HTML和CSS，确保旧版浏览器能基本展示内容。然后在此基础上，利用现代CSS特性为现代浏览器提供更丰富的布局和交互效果。
3. 使用Flexbox和Grid布局：这两种布局方式在现代浏览器中能很好地实现灵活且高效的布局，但需要注意对旧版浏览器的兼容。对于不支持的浏览器，可提供备用的浮动布局等传统方式。
4. CSS前缀：为一些CSS属性添加浏览器厂商前缀，以确保在不同浏览器上的兼容性。

关键CSS代码示例

1. 基础样式

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

2. 响应式布局 - 使用Flexbox

/* 水平排列导航栏 */
nav {
    display: flex;
    justify-content: space-around;
    background-color: lightgray;
}
nav a {
    color: black;
    text-decoration: none;
}

/* 不同屏幕尺寸下的布局调整 */
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav a {
        margin: 10px 0;
    }
}

3. 响应式布局 - 使用Grid布局

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
    }
}

4. 针对旧版浏览器的兼容处理

/* 为Flexbox添加浏览器前缀 */
nav {
    display: -webkit-box; /* 旧版WebKit内核浏览器 */
    display: -moz-box; /* 旧版Gecko内核浏览器 */
    display: -ms-flexbox; /* 旧版IE浏览器 */
    display: -webkit-flex; /* 较新WebKit内核浏览器 */
    display: flex;
    justify-content: space-around;
    background-color: lightgray;
}