要使用CSS媒体查询实现网站的响应式设计，可以按照以下步骤进行：

1. 在HTML文档的头部添加一个链接到外部CSS文件的标签，例如：<link rel=”stylesheet” href=”style.css”>

2. 在CSS文件中定义不同屏幕大小所应用的样式。可以使用媒体查询来针对不同的屏幕大小应用不同的样式。例如：
@media screen and (max-width: 768px) {

body {
background-color: red;
}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

body {
background-color: blue;
}
}

@media screen and (min-width: 1025px) {

body {
background-color: green;
}
}

以上示例中，可以根据屏幕大小来设置不同的背景颜色。

3. 在媒体查询中，可以使用多种不同的条件来指定样式应用的屏幕大小范围。常见的条件包括屏幕宽度、高度、朝向等等。可以根据具体的需求来选择合适的条件。

4. 在CSS中可以应用任何其他的样式，并且可以嵌套使用媒体查询来适应不同的屏幕大小。

使用CSS媒体查询可以根据设备的屏幕大小和其他属性来适应不同的浏览环境，从而实现网站的响应式设计。