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

Question

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

怪我咯 · Answer

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

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

ringa_lee · Answer

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

PHP中文网 · Answer

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

PHP中文网 · Answer

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

迷茫 · Answer

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

PHP中文网 · Answer

bootcss.com

ringa_lee · Answer

利用媒体查询

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

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

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

Php8, I'm coming too