响应式设计视图

响应式设计采用不同的屏幕尺寸来呈现在各种设备(例如移动电话或者平板电脑)下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。

下面的截屏是在328*480分辨率下展示的一个维基百科移动版页面。

响应式设计视图使用非常方便,您可以快速和精确地改变展示区域的大小。

当然,您可以改变浏览器窗口本身的大小。但是如果把浏览器窗口变小,其他的浏览器内容也会相应变小,可能会使得浏览器界面变得不那么好用了。

当你打开响应式视图,你可以继续正常地进行浏览。While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.

打开和关闭

有两个方法打开响应式视图:

  • 在火狐浏览器菜单(或者工具栏菜单-如果您选择了显示菜单,或者是您在使用Mac OS X)下的Web开发者子菜单下选择“响应式视图”;
  • 点击工具箱工具栏里的“响应式设计模式”按钮

有三个方法关闭响应式视图

  • 再次选择菜单里的“响应式设计视图”
  • 按键盘上的Esc键
  • 点击左上角的“关闭”按钮

改变大小

有两个方法改变内容区域的大小:

如果您使用拖放的方式改变大小,可以按住Control键(Mac OS X下用Cmd键)来减缓改变的速度,可以更精确地控制大小。

响应式视图控件

在响应式视图窗口的顶部有五个控件:

Close 关闭响应式视图,回到正常浏览模式
Select size 从预设的分辨率组合内选择,或者自定义分辨率
Portrait/Landscape 选择屏幕的水平或者垂直模式

Simulate touch events

打开/关闭模拟触摸事件,鼠标事件将被模拟为触摸事件.

Take screenshot

内容区域的截屏,截屏内容保存到火狐的默认下载位置

 

文档标签和贡献者

 此页面的贡献者: Meteormatt, maybe, ziyunfei, dannyxu
 最后编辑者: Meteormatt,