diff options
Diffstat (limited to 'files/zh-cn/web/progressive_web_apps/responsive')
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/responsive/index.html | 78 | ||||
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html | 392 |
2 files changed, 392 insertions, 78 deletions
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/index.html b/files/zh-cn/web/progressive_web_apps/responsive/index.html deleted file mode 100644 index 3177fc1c29..0000000000 --- a/files/zh-cn/web/progressive_web_apps/responsive/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Responsive design -slug: Web/Progressive_web_apps/Responsive -tags: - - Media Queries - - PWA - - Progressive web apps - - Responsive web design - - viewport -translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -translation_of_original: Web/Progressive_web_apps/Responsive ---- -<div class="column-container summary"> -<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div> -</div> - -<h2 id="核心指南">核心指南</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt> - <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt> - <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd> -</dl> - -<h2 id="技术">技术</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technology</th> - <th scope="col">Description</th> - <th scope="col">Support summary</th> - <th scope="col">Latest spec</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td> - <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td> - <td>Controls viewport settings, primarily on mobile devices.</td> - <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br> - Viewport meta tag: Widespread across modern mobile devices</td> - <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - <td>A very useful CSS feature for creating flexible, responsive layouts.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td> - </tr> - </tbody> -</table> - -<h2 id="工具">工具</h2> - -<dl> - <dt><a href="https://modernizr.com/">Modernizr</a></dt> - <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd> - <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt> - <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd> -</dl> - -<h2 id="参见">参见</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt> - <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt> - <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd> -</dl> diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..0887a22619 --- /dev/null +++ b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,392 @@ +--- +title: 媒体 +slug: Web/Progressive_web_apps/Responsive/Media_types +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Guide/CSS/Getting_started/Media +--- +<p>{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}</p> + +<p>本章节是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> <span style="line-height: 1.5;">指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。</span></p> + +<h2 class="clearLeft" id="信息_Media">信息: Media</h2> + +<p>CSS的作用是将网页文档以更友好的展现方式呈现给用户。</p> + +<p><span style="line-height: 1.5;">例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。</span></p> + +<p>CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>我们的站点上有一个导航区域允许用户浏览。</p> + +<p>在标签语言中，导航区域父元素的id是 <code>nav-area.</code>(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)</p> + +<p>为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p><span style="line-height: 1.5;">一些常见的媒介类型</span><span style="line-height: 1.5;">:</span></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>彩色计算机显示</td> + </tr> + <tr> + <td><code>print</code></td> + <td>打印（分页式媒体）</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>投影</td> + </tr> + <tr> + <td><code>all</code></td> + <td>所有媒体 (默认)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">更多</div> + +<p>一些其他指定媒介类型的规则。</p> + +<p><span style="line-height: 1.5;">类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">LINK</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">标签上添加media属性来指定媒介类型。</span></p> + +<p>在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。</p> + +<p><span style="line-height: 1.5;">根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。</span></p> + +<p><span style="line-height: 1.5;">想获取媒介类型更多细节，请参考CSS规范中的</span> <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> <span style="line-height: 1.5;">部分。</span></p> + +<p>接下来将介绍更多 {{cssxref("display")}} <span style="line-height: 1.5;">属性的例子</span><span style="line-height: 1.5;">: </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a><span style="line-height: 1.5;">.</span></p> +</div> + +<h3 id="打印">打印</h3> + +<p>CSS有一些特性能够支持打印和分页媒体。</p> + +<p> {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 <code>@page:left</code> 和 <code>@page:right。</code></p> + +<p>对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。</p> + +<p>可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>这个规则把四个方向的页边距都设置为1 inch:</p> + +<pre class="brush:css">@page {margin: 1in;} </pre> + +<p><span style="line-height: 1.5;">这个规则确保每个H1元素都从新的一页开始</span>:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>想获取更多细节，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> 部分。</p> + +<p><span style="line-height: 1.5;">像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。</span></p> +</div> + +<h3 id="用户界面">用户界面</h3> + +<p><span style="line-height: 1.5;">CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。</span></p> + +<p>并没有针对用户界面设备的特殊媒介类型。</p> + +<p>下面有五种特殊的选择器:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td>当鼠标悬浮任何E元素上</td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td>当元素获得键盘焦点</td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td>当元素是当前的活动元素</td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td>当元素超链接到一个url但是用户还没有访问过</td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td>当元素超链接到一个url但是用户已经访问过</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意: </strong>在 {{gecko("2.0")}} <em>中可获得的 :visited 选择器信息是有限的。更过细节请参照</em><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a><span style="line-height: 1.5;"> 。</span></p> +</div> + +<p> {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>指示超链接</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>表明程序无法接受输入</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>表明程序正在运行，但是仍可以接受输入</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>默认（通常是箭头）</td> + </tr> + </tbody> +</table> + +<p> {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。<br> + 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。</p> + +<p>一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 <strong>disabled</strong> 属性和 <strong>readonly</strong> 属性。选择器可以通过方括: <code>{{mediawiki.external('disabled')}}</code> 或者 <code>{{mediawiki.external('readonly')}}来指定这些属性。</code></p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p><span style="line-height: 1.5;">这些规则规定了按钮在用户使用时动态变化的样式</span>:</p> + +<pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } </pre> + +<p><span style="line-height: 1.5;">这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明</span>:</p> + +<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>disabled</td> + <td>normal</td> + <td>active</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多</div> + +<p>获取更多关于CSS用户界面的信息，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> 部分。</p> + +<p><span style="line-height: 1.5;">本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。</span></p> +</div> + +<h2 id="实践_打印文档">实践: 打印文档</h2> + +<ol> + <li>创建一个新的HTML文档, <code>doc4.html</code>. 把下面的HTML代码粘贴过去: + + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h1> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>创建一个新的样式表, <code>style4.css</code>. 把下面的HTML代码粘贴过去: + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>在浏览器中查看文档，你会看到它使用的是默认样式。</li> + <li>打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。 + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;"> + <caption>挑战</caption> + <tbody> + <tr> + <td><span style="line-height: 1.5;">把指定打印样式的规则转移到单独的CSS文件。</span> + <p>学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 <code style="font-style: normal;">style4.css</code> 样式表里去。</p> + + <p>当鼠标放在标题时，改变颜色为蓝色。</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">查看这些挑战的解决方案。</a></p> + +<h2 id="接下来">接下来?</h2> + +<p>如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">讨论区</a> 中不吝赐教。</p> + +<p>目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 <strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a> 来动态地改变规则。</strong></p> |