面试题：CSS中text-shadow与响应式设计结合应用

Question

在一个响应式网页布局中，对于不同屏幕尺寸，要求标题的text - shadow效果有所变化。例如，大屏幕下标题有较明显的立体阴影，小屏幕下阴影弱化以保证文字清晰易读。请描述如何通过媒体查询来实现该功能，并给出关键的CSS代码片段。

Answer 1

实现思路

通过CSS的媒体查询（@media）来检测屏幕尺寸，根据不同的屏幕尺寸范围设置不同的text-shadow样式。

关键CSS代码片段

h1 {
    /* 默认样式，适用于所有屏幕 */
    text-shadow: 0 0 0 rgba(0, 0, 0, 0); 
}

/* 大屏幕（例如，屏幕宽度大于等于 768px） */
@media (min - width: 768px) {
    h1 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    }
}

/* 小屏幕（例如，屏幕宽度小于 768px） */
@media (max - width: 767px) {
    h1 {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    }
}

在上述代码中：

1. 首先定义了h1标题的默认text-shadow，这里设置为透明，即无明显阴影。
2. 当屏幕宽度大于等于768px时，应用大屏幕的text-shadow样式，使标题有较明显的立体阴影。
3. 当屏幕宽度小于768px时，应用小屏幕的text-shadow样式，阴影相对弱化，以保证文字清晰易读。屏幕尺寸的具体界限（768px）可以根据实际项目需求进行调整。