响应式设计

媒体类型：

• screen(屏幕)
• print(打印机)
• handheld(手持设备)
• all(通用)

常用媒体查询参数

• width:视口宽
• height:视口高
• device-width:设备的宽度
• device-height:设备的高度

• orientation:检查设备处于横向(landscape)还是竖屏(portrait)

  设计点一：百分比布局
  设计点二：弹性图片

img{
    max-width:100%;
}

很简单，如同第一点布局使用百分比，图片使用百分比。其背后的思路是：无论何时，都全包再图片的元素宽度范围内，以最大的宽度同比完整的显示图片。

设计点三：重新布局，显示与隐藏
当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，简洁。所以我们必须要做出一下处理：

1.同比例缩减 元素尺寸
2.调整页面结构布局
3.隐藏 冗余的元素

经常需要切换位置元素使用【绝对定位】，减少重绘 提高渲染性能。

关于 设计的思考：
根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载 PC，笔记本，ipad等不同设备对应的样式。而 这些样式却是冗余的，完全没有用。
因此，需要 权衡利弊
性能不是最优<- 权衡利弊 ->减少重复开发