响应式网页设计基础

关键要点

• 使用meta标签viewport来控制浏览器的“视口viewport。
• 使用元视口值 width=device-width 控制页面适应不一样分辨率的屏幕宽度。不管是手机的小屏幕或桌面显示器，页面将会根据不一样的屏幕尺寸从新对内容进行排版。
• 些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行从新排版。加入属性initial-scale=1使页面不管在什么状况下都将CSS像素与屏幕像素的比例保持在1:1，并容许页面优先采用全尺寸屏幕宽度
• 确保用户可以自我调节视窗大小
• 注意：使用逗号","来区分属性，并能保证老版本浏览器能够合理的解析这些属性
• 即：

• <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 确保viewport可用

  除了设置 initial-scale 之外，你也能够对视口进行 minimum-scale, maximum-scale 和 user-scalable 等属性设置。当设置完成以后，这些属性可以禁止用户缩放视口，从而可能致使网站的可访问性问题。

• 设置一个较大的绝对宽度的CSS页面元素（以下所示）将会致使 div 在窄屏设备视口中显得太宽（例如一台CSS像素宽度为320的iPhone）这种状况下可以使用相对宽度值，例如 width: 100%。
• 一样的，使用较大的绝对定位值可能会致使页面元素落在窄屏设备的显示范围以外，在进行移动站点开发时必定要注意这一点。
• 第二种：

  用 CSS media queries （设备查询） 来实现响应式

• 关键要点

  • media queries能够根据不一样设备的特性来应用不一样的样式。
  • 尽量使用 min-width 代替 min-device-width 来保证最宽广的体验。
  • 使用相对大小数值来设定元素大小，以防打乱布局。