人们可能通过形状和大小不同的设备来访问网页。通过响应式网页设计,你可以设计出能灵活适应不同屏幕大小、方向和分辨率的网页。

创建一个媒体查询

媒体查询是 CSS3 中引入的一项新技术,它可以根据不同的视口大小调整内容的布局。 视口是指浏览器中,用户可见的网页内容。 视口会随访问网站的设备不同而改变。
媒体查询由媒体类型组成,如果媒体类型与展示网页的设备类型匹配,则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。
下面是一个媒体查询的例子,当设备宽度小于或等于 100px 时返回内容:

@media (max-width: 100px) { /* CSS Rules */ }

以下定义的媒体查询,是当设备高度大于或等于 350px 时返回内容:

@media (min-height: 350px) { /* CSS Rules */ }

注意,只有当媒体类型与所使用的设备的类型匹配时,媒体查询中定义的 CSS 才生效。

使图片自适应设备尺寸

用 CSS 来让图片自适应其实很简单。 你只需要给图片添加这些属性:

img {
  max-width: 100%;
  height: auto;
}

设置 max-width 值为 100% 可确保图片不超出父容器的范围;设置 height 属性为 auto 可以保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

随着联网设备的增加,设备间的区别不仅发生在尺寸和规格上,还发生在用于显示的设备上。 像素密度就是区分不同显示设备的一个指标,它一般会以 PPI(Pixel Per Inch,即每英寸像素)或 DPI(每英寸点数)为计量单位。 最著名的显示器就是 Apple MacBook Pro 笔记本电脑上的“视网膜显示屏”(现亦用于 iMac)。 由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同,某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时,可能因出现“像素化”而不够清晰。
让图像正确出现在高分辨率显示器(例如 MacBook Pros “Revistina display”)上的最简单方式, 是定义它们的 width 和 height 值为原始值的一半。 下面是一个仅使用原始高度和宽度一半的图像示例:

<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

使排版根据设备尺寸自如响应

除了使用 em 或 px 设置文本大小,你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位,但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸(宽度或高度),百分比是相对于父级元素的大小。
四个不同的视窗单位分别是:
vw:如 10vw 的意思是视窗宽度的 10%。
vh: 如 3vh 的意思是视窗高度的 3%。
vmin: 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
vmax: 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。
下面这个例子是设置 body 标签的宽度为视窗宽度的 30%。

body { width: 30vw; }