响应式设计是一种使网站能够适应不同设备屏幕尺寸和分辨率的方法。而在实现响应式设计中，CSS技术是一个非常重要的组成部分。下面我将从以下四个方面来介绍如何使用CSS实现响应式设计。 一、媒体查询 媒体查询是CSS中实现响应式设计的重要方法之一。通过媒体查询，我们可以设定不同的CSS样式表，以便在不同的设备上展示不同的样式。例如： ```css @media screen and (min-width: 768px) { /* 如果设备宽度大于等于 768 像素，则执行此代码块 */ } @media screen and (max-width: 767px) { /* 如果设备宽度小于等于 767 像素，则执行此代码块 */ } ``` 二、弹性布局 弹性布局也是响应式设计中常用的布局方式之一。它可以使得页面元素按比例自适应屏幕尺寸的变化而变化。例如： ```css .container { display: flex; flex-wrap: wrap; } .item { flex: 1; } ``` 三、视口单位 视口单位是指用相对于视口大小来定义长度的CSS单位。其中vw代表视口宽度的百分比，而vh代表视口高度的百分比。例如： ```css .container { width: 100vw; height: 100vh; } ``` 四、流式布局 流式布局是针对不同屏幕尺寸，根据浏览器窗口的大小自动调整网页内容的布局方式。这种布局方式中，页面中的元素宽度并非按照固定像素值来设定，而是按比例来分配。例如： ```css .container { width: 100%; max-width: 120px; margin: auto; } .item { width: 50%; float: left; } ``` 以上就是使用CSS实现响应式设计的主要方法。当然，除了上述方法以外，我们还可以通过使用一些CSS框架（如Bootstrap、Foundation等）来简化响应式设计的过程，提高工作效率。