responsive-web-design-principles translate (#35)

Author: rainpure

01-responsive-web-design/responsive-web-design-principles.json

@@ -8,24 +8,24 @@
       "id": "587d78b0367417b2b2512b08",
       "title": "Create a Media Query",
       "description": [
-        "Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site.",
-        "Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.",
-        "Here's an example of a media query that returns the content when the device's width is less than or equal to 100px:",
+        "媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。",
+        "媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样式。",
+        "下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：",
         "<code>@media (max-width: 100px) { /* CSS Rules */ }</code>",
-        "and the following media query returns the content when the device's height is more than or equal to 350px:",
+        "以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：",
         "<code>@media (min-height: 350px) { /* CSS Rules */ }</code>",
-        "Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.",
+        "只有当媒体类型与当前设备匹配时，才应用媒体查询中的 CSS。",
         "<hr>",
-        "Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of 10px when the device's height is less than or equal to 800px."
+        "增加一个设备的高度小于或等于 800px 时，<code>p</code> 标签的 <code>font-size</code> 为 10px 的媒体查询。"
       ],
       "tests": [
         {
-          "text": "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
-          "testString": "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
+          "text": "当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 10px。",
+          "testString": "assert($('p').css('font-size') == '10px', '当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 10px。');"
         },
         {
-          "text": "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
-          "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
+          "text": "使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。",
+          "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), '使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -58,26 +58,26 @@
       "id": "587d78b1367417b2b2512b09",
       "title": "Make an Image Responsive",
       "description": [
-        "Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:",
+        "用 CSS 来让图片自适应其实很简单。不要使用绝对单位：",
         "<code>img { width: 720px; }</code>",
-        "You can use:",
+        "你应该使用：",
         "<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>",
-        "The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
+        "<code>max-width</code> 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。将 <code>display</code> 属性设置为 <code>block</code> 可以让 image 标签从内联元素（默认值）更改为块级元素。设置 <code>height</code> 属性为 auto 保持图片的原始宽高比。",
         "<hr>",
-        "Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
+        "给 <code>img</code> 标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。"
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
-          "testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
+          "text": "<code>img</code> 标签应设置 <code>max-width</code> 为 100%。",
+          "testString": "assert(code.match(/max-width:\\s*?100%;/g), '<code>img</code> 标签应设置 <code>max-width</code> 为 100%。');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>display</code> set to block.",
-          "testString": "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
+          "text": "<code>img</code> 标签应设置 <code>display</code> 为 block。",
+          "testString": "assert($('img').css('display') == 'block', '<code>img</code> 标签应设置 <code>display</code> 为 block。');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>height</code> set to auto.",
-          "testString": "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
+          "text": "<code>img</code> 标签应设置 <code>height</code> 为 auto。",
+          "testString": "assert(code.match(/height:\\s*?auto;/g), '<code>img</code> 标签应设置 <code>height</code> 为 auto。');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -105,20 +105,20 @@
       "id": "587d78b1367417b2b2512b0a",
       "title": "Use a Retina Image for Higher Resolution Displays",
       "description": [
-        "The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
-        "Here is an example of an image that is only using half of the original height and width:",
-        "<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
+        "为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 <code>width</code> 和 <code>height</code> 值为源文件宽高的一半。",
+        "这是一个图片宽高设置为源文件一半的例子：",
+        "<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;一张高质量的图片&quot;&gt;</blockquote>",
         "<hr>",
-        "Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
+        "设置 <code>img</code> 标签的 <code>width</code> 和 <code>height</code> 为它们原始宽高的一半。在这个例子中，原始 <code>height</code> 和原始 <code>width</code> 的值都为 200px。"
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
-          "testString": "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
+          "text": "<code>img</code> 标签的 <code>width</code> 值应为 100px。",
+          "testString": "assert($('img').css('width') == '100px', '<code>img</code> 标签的 <code>width</code> 值应为 100px。');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
-          "testString": "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
+          "text": "<code>img</code> 标签应含有 100px 的 <code>height</code>。",
+          "testString": "assert($('img').css('height') == '100px', '<code>img</code> 标签应含有 100px 的 <code>height</code>。');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -146,20 +146,20 @@
       "id": "587d78b1367417b2b2512b0c",
       "title": "Make Typography Responsive",
       "description": [
-        "Instead of using <code>em</code> or <code>px</code> to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.",
-        "The four different viewport units are:",
-        "<ul><li><code>vw: 10vw</code> would be 10% of the viewport's width.</li><li><code>vh: 3vh</code> would be 3% of the viewport's height.</li><li><code>vmin: 70vmin</code> would be 70% of the viewport's smaller dimension (height vs. width).</li><li><code>vmax: 100vmax</code> would be 100% of the viewport's bigger dimension (height vs. width).</li></ul>",
+        "除了用 <code>em</code> 或 <code>px</code> 去设置文本大小, 你还可以用视窗单位来做响应式排版。视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。",
+        "四个不同的视窗单位分别是：",
+        "<ul><li><code>vw</code>：如 <code>10vw</code> 的意思是视窗宽度的 10%。</li><li><code>vh：</code> 如 <code>3vh</code> 的意思是视窗高度的 3%。</li><li><code>vmin：</code> 如 <code>70vmin</code> 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。</li><li><code>vmax：</code> 如 <code>100vmax</code> 的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。</li></ul>",
         "<hr>",
-        "Set the <code>width</code> of the <code>h2</code> tag to 80% of the viewport's width and the <code>width</code> of the paragraph as 75% of the viewport's smaller dimension."
+        "设置 <code>h2</code> 标签 <code>width</code> 为视窗宽度的 80%，并且段落 <code>width</code> 为视窗高度和宽度中较小值的 70%。"
       ],
       "tests": [
         {
-          "text": "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
-          "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
+          "text": "<code>h2</code> 标签 <code>width</code> 应为 80vw。",
+          "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), '<code>h2</code> 标签的 <code>width</code> 应为 80vw。');"
         },
         {
-          "text": "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
-          "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
+          "text": "<code>p</code> 标签 <code>width</code> 应为 75vmin。",
+          "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), '<code>p</code> 标签的 <code>width</code> 应为 75vmin。');"
         }
       ],
       "releasedOn": "Feb 17, 2017",

01-responsive-web-design/responsive-web-design-principles.md

@@ -1,3 +1 @@
-# Introduction to the Responsive Web Design Principles #
-
-Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design.
+如今，从大屏的台式电脑到小屏的手机，我们有各式各样的设备可以上网。这些设备有着不同的屏幕尺寸、分辨率和处理能力。响应式 Web 设计是一种能自如响应不同尺寸设备的设计方法。能使页面结构和 CSS 规则能够灵活应用于不同设备之间的差异。一般来说，页面的 CSS 是设计给目标用户看的。如果你预计网站的大部分流量来自移动端，那么应该采取“移动端优先”的策略，再为 PC 端做兼容。如果你预计网站的大部分流量来自 PC 端，那么应该采取“PC 端优先”的策略，再为移动端做兼容。CSS 提供了书写不同样式规则的工具，然后根据显示网页的设备应用它们。本节将介绍使用 CSS 来响应 Web 设计的基本方法。