响应式Web设计

创建媒体查询

媒体查询是CSS3中引入的一项新技术，可根据不同的视口大小更改内容的表示形式。视口是用户在网页上的可见区域，视访问网站所用的设备而异。

媒体查询由一种媒体类型组成，如果该媒体类型与显示文档的设备类型匹配，则将应用样式。媒体查询中可以根据需要选择任意数量的选择器和样式。

以下是媒体查询的示例，该查询在设备的宽度小于或等于100px时返回内容：

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

当设备的高度大于或等于350px时，以下媒体查询将返回内容：

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

请记住，仅当媒体类型与所使用设备的媒体类型匹配时，才会应用媒体查询中的CSS。

<style>
  p {
    font-size: 20px;
  }

  /* Only change code below this line */

@media (max-height: 800px) { 
  p {
    font-size:10px;
  }
}
@media (min-height:800px){
  p{
    font-size:20px;
  }
}

  /* Only change code above this line */
</style>

使图像具有响应性

使用CSS使图像具有响应性实际上非常简单。您只需要向图像添加以下属性：

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

max-width的100%将确保图像不会比它在容器更宽，而height中auto将会使图像保持其原始宽高比。

使用视网膜图像进行高分辨率显示

随着互联网连接设备的增加，它们的尺寸和规格也有所不同，并且它们使用的显示器在内部和外部可能会有所不同。像素密度是一个设备上可能与其他设备不同的方面，这种密度称为“像素每英寸（PPI）”或“每英寸点数（DPI）”。最著名的显示器就是最新的Apple MacBook Pro笔记本电脑和最近的iMac电脑上的“视网膜显示器”。由于“视网膜”和“非视网膜”显示器之间的像素密度不同，因此某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。

使图像正确显示在高分辨率显示器（例如MacBook Pro的“视网膜显示器”）上的最简单方法是将其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; }