现在的网站已经有了各种设备不同尺寸的屏幕，这就需要我们编写不同的 CSS 样式。这种技术被称为响应式设计，也就是根据用户的设备自动适应不同尺寸的屏幕大小。

在我们的 CSS 中，我们可以使用媒体查询来适应不同屏幕。以下是一个最简单的例子：

@media (max-width: 600px) {
body {
background-color: blue;
}
}

这个代码是一个媒体查询，它告诉浏览器当屏幕宽度小于或等于 600 像素时将背景颜色设置为蓝色。

我们可以在一个 CSS 文件中编写多个媒体查询来适应不同的屏幕。例如：

@media (max-width: 600px) {
/* 样式表 */
}
@media (min-width: 601px) and (max-width: 900px) {
/* 样式表 */
}
@media (min-width: 901px) {
/* 样式表 */
}

这里我们使用了三个不同的媒体查询，分别适应不同的屏幕大小。

使用 CSS 样式时，我们应该注意弹性布局，这可以让我们的网站根据不同尺寸的屏幕来自动调整布局：

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: calc(25% - 20px);
margin: 10px;
}

这里我们使用 flex 布局和 calc 函数来设置容器和子项的布局，这样就可以自动适应不同屏幕大小。

总的来说，在设计网站时，我们应该考虑到不同的屏幕大小并使用合适的 CSS 样式。通过响应式设计，让网站在不同的设备上都能有良好的显示效果。