css不同屏幕显示不同的效果

CSS是网页设计中必不可少的一部分，它可以让应用在不同设备上显示不同的效果。特别是在现代网页设计中，网页需要适配各种大小和分辨率的设备，因而 CSS 的使用变得更加重要。

在CSS中，我们可以使用多种方式来适配不同设备上的效果，如使用百分比和 em 单位来设置元素的宽高和字体大小等等。尤其是通过媒体查询（Media Query），我们可以检测屏幕的特性并为其应用不同的 CSS 样式。

@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
    .title {
        font-size: 18px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        width: 80%;
    }
    .title {
        font-size: 24px;
    }
}
@media screen and (min-width: 1024px) {
    .container {
        width: 50%;
    }
    .title {
        font-size: 32px;
    }
} 

以上的代码展示了一个简单的媒体查询样例，它可以适配三种不同的屏幕大小：手机屏幕（< 767px），平板屏幕（768px - 1023px）和电脑屏幕（>1024px）。我们可以通过调整 .container 元素的宽度和 .title 元素的字体大小来优化显示效果。

这个样例只是 CSS 适配的冰山一角，事实上，我们可以在 CSS 中使用多种技巧来适配不同的屏幕大小和设备。如果你想写出一个优秀的移动端或响应式网页，那么学习 CSS 的适配技巧是必不可少的。