javascript - 当在浏览器把滴滴打车官网窗口大小调到比较小的时候会自动变成手机web的网站，这个怎么实现的

Question

当在浏览器把滴滴打车官网窗口大小调到比较小的时候会自动变成手机web的网站，这个怎么实现的http://www.xiaojukeji.com/index.html

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

bootcss.com

Answer 7

利用媒体查询

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

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

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