概述
访问网页的设备有着不同的屏幕尺寸、分辨率和处理能力。
响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。
实现这一切的核心要素是：媒体查询（Media Query）。
如果你预计网站的大部分流量来自移动端，那么应该采取“移动端优先”的策略，再为 PC 端做兼容。
如果你预计网站的大部分流量来自 PC 端，那么应该采取“PC 端优先”的策略，再为移动端做兼容。
CSS 提供了书写不同样式规则的工具，然后根据显示网页的设备来应用这些样式。
CSS3 引入了媒体查询
- 它可以根据不同的可视窗口大小显示不同的布局。
- 可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。
- 媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样 式。
- 下面是一个媒体查询的例子，当设备宽度小于或等于 100px时返回内容：
@media (max-width: 100px) { /* CSS Rules */ }- 以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
@media (min-height: 350px) { /* CSS Rules */ }
使图片根据设备尺寸自动响应
- 很简单。不要使用绝对单位
max-width: 100%属性能让图片以 100% 的最大宽度适应其父容器的宽度，同时图片不会拉伸得比原始宽度还宽。display: block让<img>标签从内联元素（默认值）更改为块级元素。height:auto保持图片的原始宽高比。
评论