blob: b0ea0712a46cced6b7fd7170d3443f613078c4c2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
---
title: 响应式设计视图
slug: Tools/Responsive_Design_View
translation_of: Tools/Responsive_Design_Mode
---
<div>{{ToolsSidebar}}</div><p><a href="/zh-CN/docs/Web_Development/响应式_Web_设计">响应式设计</a>采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。</p>
<p>{{EmbedYouTube("LBcE72sG2s8")}}</p>
<p>下面的截屏是在328*480分辨率下展示的一个维基百科移动版页面。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png">响应式设计视图使用非常方便，您可以快速和精确地改变展示区域的大小。</p>
<p>当然，您可以改变浏览器窗口本身的大小。但是如果把浏览器窗口变小，其他的浏览器内容也会相应变小，可能会使得浏览器界面变得不那么好用了。</p>
<p>当你打开响应式视图，你可以继续正常地进行浏览。While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.</p>
<h2 id="打开和关闭">打开和关闭</h2>
<p>有两个方法打开响应式视图：</p>
<ul>
<li>在火狐浏览器菜单（或者工具栏菜单-如果您选择了显示菜单，或者是您在使用Mac OS X）下的Web开发者子菜单下选择“响应式视图”；</li>
<li>点击工具箱工具栏里的“响应式设计模式”按钮</li>
</ul>
<p>有三个方法关闭响应式视图</p>
<ul>
<li>再次选择菜单里的“响应式设计视图”</li>
<li>按键盘上的Esc键</li>
<li>点击左上角的“关闭”按钮</li>
</ul>
<h2 id="改变大小">改变大小</h2>
<p>有两个方法改变内容区域的大小：</p>
<ul>
<li>使用<a href="#select-size">“选择大小”按钮</a></li>
<li>点击和拖放内容区域右边和下方，或者是右下角的控件</li>
</ul>
<p>如果您使用拖放的方式改变大小，可以按住Control键（Mac OS X下用Cmd键）来减缓改变的速度，可以更精确地控制大小。</p>
<div style="overflow: hidden;">
<h2 id="响应式视图控件">响应式视图控件</h2>
<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="display: block; height: 356px; margin-left: auto; margin-right: auto; width: 545px;">在响应式视图窗口的顶部有五个控件：</p>
<table class="standard-table">
<tbody>
<tr>
<td><strong>Close</strong></td>
<td>关闭响应式视图，回到正常浏览模式</td>
</tr>
<tr>
<td><strong><a name="select-size">Select size</a></strong></td>
<td>从预设的分辨率组合内选择，或者自定义分辨率</td>
</tr>
<tr>
<td><strong>Portrait/Landscape</strong></td>
<td>选择屏幕的水平或者垂直模式</td>
</tr>
<tr>
<td>
<p><strong>Simulate touch events</strong></p>
</td>
<td>
<p>打开/关闭模拟触摸事件，鼠标事件将被模拟为<a href="/zh-CN/docs/Web/Guide/API/DOM/Events/Touch_events">触摸事件</a>.</p>
</td>
</tr>
<tr>
<td>
<p><strong>Take screenshot</strong></p>
</td>
<td>内容区域的截屏，截屏内容保存到火狐的默认下载位置</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
