编写CSS代码来支持不同分辨率的屏幕

CSS媒介查询（media query）可以帮助我们支持不同分辨率的屏幕。它可以根据屏幕的宽度、高度和颜色深度等多个不同的特性，来为不同的屏幕设置不同的CSS样式。

一般来说，我们使用CSS媒介查询来支持不同分辨率的屏幕大概可以分为以下三步：

1. 设置基本样式。首先，我们要为不同分辨率的屏幕设置一个基本的CSS样式，这样，即使是不支持媒介查询的浏览器，都能正常显示页面。

2. 使用媒介查询设置不同分辨率的样式。针对不同分辨率的屏幕，我们要使用媒介查询，来设置不同的CSS样式，以此来支持不同的屏幕。

3. 设置每个屏幕的样式。最后，为每个屏幕设置不同的CSS样式，以便在不同的分辨率下，页面能够正常显示出来。

下面是一个示例，使用CSS媒介查询来支持不同分辨率的屏幕：

/* 设置基本样式 */
body{
font-size: 14px;
background-color: #fff;
color: #000;
}

/* 设置针对1024px宽度的样式 */
@media screen and (min-width: 1024px) {
body{
font-size: 16px;
background-color: #f0f0f0;
}
}

/* 设置针对1280px宽度的样式 */
@media screen and (min-width: 1280px) {
body{
font-size: 18px;
background-color: #e8e8e8;
}
}

/* 设置针对1920px宽度的样式 */
@media screen and (min-width: 1920px) {
body{
font-size: 20px;
background-color: #d8d8d8;
}
}

以上就是使用CSS媒介查询来支持不同分辨率的屏幕的一个例子，它可以根据屏幕的宽度，为不同的屏幕设置不同的CSS样式，以使页面能够正常显示出来。