84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
当在浏览器把滴滴打车官网窗口大小调到比较小的时候会自动变成手机web的网站,这个怎么实现的http://www.xiaojukeji.com/index.html
欢迎选择我的课程,让我们一起见证您的进步~~
媒介查询可视区域宽度小于 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 */ }
媒介查询
可视区域宽度小于 600px,以下 CSS 将被应用。
这种处理叫做响应式,如果感兴趣可以自己去google一下响应式是怎么实现的,原理很简单
滴滴官网前端是响应式布局,使用了bootstrap框架。
媒体查询
@media screen and (max-width: 600px) {
这里写你想缩小之后的样式表
}
这个是响应式布局的效果,建议您可以查看一下bootstrap栅格系统这个章节,你就会明白了。
bootcss.com
利用媒体查询
刚刚看了一下,滴滴官网应该对于屏幕宽度768px~1024px做相应处理