使用Firefox助力响应式设计:Responsive模式介绍

响应式设计在现在这种移动设备横行的年代非常好用,借助媒体查询和自适应和弹性技术,可以很方便的构建同时支持多种屏幕设备的网页.

在过去,我们需要依赖浏览器插件调整浏览器的显示范围或者干脆修改浏览器的大小来测试我们的响应式网页.现在情况有了改变,Firefox15及更高版本自带了响应式设计工具,这也表明响应式设计在未来的Web设计领域将享有一定的地位.

开启响应式(Responsive Mode)设计工具

开启响应式设计工具有三种方法.

1.在菜单中开启响应式设计视图

点击Firefox左上角的菜单-Web 开发者-响应式设计视图.

从菜单中启动响应式设计视图

2.通过开发者工具栏开启

如果你已经开启了开发者工具栏,那么就可以直接在”更多工具”中看到”响应式设计视图”

从开发者工具栏开启响应式设计视图

3.快捷键开启响应式设计视图

同时按下Ctrl+Shift+M即可.

使用响应式设计视图查看网页

开启响应式设计视图后,当前页面将被放入一个框架中,左上角多出两个用来调整分辨率及屏幕方向的按钮.

通过这两个按钮修改分辨率和方向会即时改变网页显示区域的尺寸.

下面演示本博客在多种状态下的显示效果.

320×480

480×320

360×640

640×360

1024×768

768×1024

配合Firefox自带的其他开发者工具就可以轻松的完成响应式网页的调试,非常方便.