面试题：CSS border - radius与响应式设计结合

Question

在响应式网页设计中，对于一个自适应宽度的按钮，如何使用border - radius实现无论按钮宽度如何变化，其四个角都始终保持圆润且视觉上和谐的效果？按钮的初始样式为button { padding: 10px 20px; background - color: #007BFF; color: white; }，请根据不同屏幕宽度（如小于600px、600 - 992px、大于992px）分别给出border - radius的设置方案及相关CSS代码，并解释原理。

Answer 1

小于600px

• 设置方案：border - radius: 5px;
• CSS代码：

@media (max - width: 600px) {
    button {
        border - radius: 5px;
    }
}

• 原理：在较小屏幕宽度下，按钮宽度也相应变小，较小的border - radius值（如5px）能使按钮角看起来圆润且与按钮尺寸适配，避免过大的圆角在小按钮上显得不协调。

600 - 992px

• 设置方案：border - radius: 8px;
• CSS代码：

@media (min - width: 600px) and (max - width: 992px) {
    button {
        border - radius: 8px;
    }
}

• 原理：随着屏幕宽度增加，按钮宽度也变大，适当增大border - radius值（如8px），能保持按钮角的圆润感，并且在这个中等宽度范围内与按钮大小比例协调。

大于992px

• 设置方案：border - radius: 10px;
• CSS代码：

@media (min - width: 992px) {
    button {
        border - radius: 10px;
    }
}

• 原理：大屏幕下按钮宽度更宽，更大的border - radius值（如10px）可以让按钮角的圆润度在较大尺寸上依然保持和谐，与较大的按钮宽度相匹配，增强视觉美感。