diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/tools/responsive_design_mode/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/tools/responsive_design_mode/index.html')
-rw-r--r-- | files/zh-cn/tools/responsive_design_mode/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/zh-cn/tools/responsive_design_mode/index.html b/files/zh-cn/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..b0ea0712a4 --- /dev/null +++ b/files/zh-cn/tools/responsive_design_mode/index.html @@ -0,0 +1,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> |