在CSS中，大家可以使用@media规则来定义响应式设计。常用的@media媒体类型包括：all、screen、print和speech。大家可以在@media规则中定义大家想要的屏幕大小，如果该媒体查询为真，则可以应用相应的样式。
/* 媒体查询 */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: lightblue;
}
}如上代码，大家只有在屏幕宽度介于768px和1024px之间时才会应用这一样式。因此，大家可以为不同的设备定义不同的样式，以实现响应式设计。
在CSS3中，大家还可以使用设备像素比例（device pixel ratio）来定义响应式设计。设备像素比是设备物理像素数和CSS像素数的比率。例如，iPhone 6的设备像素比为2，而iPhone 6 Plus的设备像素比为3。因此，大家可以为每个设备定义不同的样式。
/* iPhone 6样式 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
body {
font-size: 16px;
}
}
/* iPhone 6 Plus样式 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
body {
font-size: 20px;
}
}总而言之，CSS medium提供了一种非常方便的方法来实现响应式设计。使用@media媒体查询和设备像素比可以帮助大家在不同的设备上展示出最佳的样式和布局。