1.4 响应式布局中的图像与字体

1.4.1 流式图像

响应式网页中的图像能根据画面的大小自动缩放，称为流式图像（Fluid Image），也叫自适应图像。流式图像与流式网格的理念是相同的，主要是把px单位修改为百分比单位，实现按照画面或者父元素的宽度进行缩放。

响应式网页中，图像的显示方式主要有两种，一种为<img>标签，另一种就是用CSS的背景图。

在网页中插入一个<img>标签，只需将width或height其中一个尺寸设置为%，将另外一个设置为auto，即可实现图像的自适应。

【实例1-2】 应用流式自适应图像，代码如下。

运行代码，可以看到图像的自适应效果。在上述代码中，使用“max-width:1200px;”来设置显示图像的最大宽度，这样可以防止图像被放到过大导致模糊不清。

如果要使用背景图的方式来实现图像的自适应，使背景图像随着父元素放大后仍能布满背景，可以截去部分背景图像。例如要实现父元素高度固定，而宽度自适应，可以借助于background-size属性来设置，设置其值为“cover”即可。

1.4.2 字体使用

为了使响应式网页中的文字也能够随屏幕的大小进行缩放，字体的单位必须设置为百分比，以支持动态的网页内容，借助自适应图像的实现方式，将字体的单位px修改为em或者%即可。

px（像素）是相对长度单位，是相对于不同设备（Pad/Phone/PC）显示屏分辨率而言的。1em指的是一个字体的大小，浏览器的默认字体大小都是16px，也就是1em=16px。px相对于屏幕分辨率，而em相对于父级div，所以在响应式网页布局中使用em更合适，因为任何浏览器默认字体大小是固定的，而不同设备显示屏幕分辨率却各不相同。em有两个特点，一是em的值并不是固定的；二是em会继承父元素的字体大小。