媒介查询
可视区域宽度小于 600px，以下 CSS 将被应用。

@media screen and (max-width: 600px) { .test { background:blue; } }

这种处理叫做响应式，如果感兴趣可以自己去google一下响应式是怎么实现的，原理很简单

滴滴官网前端是响应式布局，使用了bootstrap框架。

媒体查询
@media screen and (max-width: 600px) {
这里写你想缩小之后的样式表
}

这个是响应式布局的效果，建议您可以查看一下bootstrap栅格系统这个章节，你就会明白了。

bootcss.com

利用媒体查询

@media screen and (max-width: 768px){ /* 窗口小于600px */ }

刚刚看了一下，滴滴官网应该对于屏幕宽度768px~1024px做相应处理

@media screen and (min-width: 769px) and (max-width: 1023px){ /* 窗口大于768px，小于1024px */ }