fix(guide): simplify directory structure

guide/chinese/certifications/responsive-web-design/responsive-web-design-principles/create-a-media-query/index.md

@@ -0,0 +1,22 @@
+---
+title: Create a Media Query
+localeTitle: 创建媒体查询
+---
+## 创建媒体查询
+
+按照说明：
+
+添加媒体查询，以便当设备的高度小于或等于800px时，p标签的字体大小为10px。
+
+媒体查询是：
+
+```css
+  /* Add media query below */ 
+  @media (max-height: 800px){ 
+    p { 
+    font-size: 10px; 
+      } 
+  } 
+```
+
+当设备的宽度小于或等于800px时，文本大小为10px。

guide/chinese/certifications/responsive-web-design/responsive-web-design-principles/index.md

@@ -0,0 +1,11 @@
+---
+title: Responsive Web Design Principles
+localeTitle: 响应式网页设计原则
+---
+## 响应式网页设计原则
+
+这是一个存根。 [帮助我们的社区扩展它](https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md) 。
+
+[这种快速风格指南有助于确保您的拉取请求被接受](https://github.com/freecodecamp/guides/blob/master/README.md) 。
+
+#### 更多信息：

guide/chinese/certifications/responsive-web-design/responsive-web-design-principles/make-an-image-responsive/index.md

@@ -0,0 +1,22 @@
+---
+title: Make an Image Responsive
+localeTitle: 使图像响应
+---
+## 使图像响应
+
+按照说明：
+
+添加img标记的样式规则，使其响应其容器的大小。它应该显示为块级元素，它应该适合其容器的整个宽度而不拉伸，并且它应该保持其原始的宽高比。
+
+风格变成：
+
+```css
+<style> 
+  img { 
+  max-width: 100%; 
+  display: block; 
+  height: auto; 
+ } 
+ </style> 
+
+```

guide/chinese/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md

@@ -0,0 +1,9 @@
+---
+title: Make Typography Responsive
+localeTitle: 使排版响应
+---
+## 使排版响应
+
+这是一个存根。 [帮助我们的社区扩展它](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md) 。
+
+[这种快速风格指南有助于确保您的拉取请求被接受](https://github.com/freecodecamp/guides/blob/master/README.md) 。

guide/chinese/certifications/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays/index.md

@@ -0,0 +1,19 @@
+---
+title: Use a Retina Image for Higher Resolution Displays
+localeTitle: 使用Retina图像获得更高分辨率的显示
+---
+## 使用Retina图像获得更高分辨率的显示
+
+按照说明：
+
+将img标记的宽度和高度设置为原始值的一半。在这种情况下，原始高度和原始宽度都是200px。
+
+风格4变为：
+
+```css
+  <style> 
+  img { height: 100px; width: 100px; } 
+  </style> 
+```
+
+请注意，使图像显示为“视网膜”（并为视网膜显示进行优化）的最简单方法是将其宽度和高度值定义为原始文件的一半。