响应式页面设计准则

这一部分内容不多，算是对响应式页面设计提供的一些小tips。内容包括：

• 利用媒体查询设置文本的对应字体大小（可以延伸到任意元素的任意属性）
• 图片的响应式呈现（利用百分比设置宽度）
• 新添加了viewport（可视区域）的内容，利用vw, vh, vmin, vmax来设置宽高

以下是这一部分习题的解答：

---

Introduction to the Responsive Web Design Challenges

• Create a Media Query

  <style>
    @media (max-height: 800px) { 
  	  p { font-size: 10px; } 
    }
  </style>

• Make an Image Responsive

  <style>
    img {
        max-width: 100%;
        display: block;
        height: auto;
    }
  </style>

• Use a Retina Image for Higher Resolution Displays

  <style>
    img {
        width:100px;
        height: 100px;
    }
  </style>

• Make Typography Responsive

  <style>
    h2 {
        width: 80vw;
    }
    p {
        width: 75vmin;
    }
  </style>