freeCodeCamp刷题总结（四）

一：响应式Web设计

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。 实现这一切的核心要素是：媒介查询（Media Query）。 如果你预计网站的大部分流量来自移动端，那么应该采取“移动端优先”的策略，再为PC端做兼容。 如果你预计网站的大部分流量来自PC端，那么应该采取“PC端优先”的策略，再为移动端做兼容。

1、媒体查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。 @media (max-width: 100px) { /* CSS Rules / } ：当设备宽度小于或等于100px时，返回内容； @media (min-height: 350px) { / CSS Rules */ }：当设备高度大于或等于350px时，返回内容；

例1：

2、图片的自适应

给 img标签增加样式规则使它自适应容器尺寸。（不要使用绝对单位） max-width属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。 display：block 可以让 image 标签从内联元素（默认值）更改为块级元素。 height： auto 保持图片的原始宽高比。

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

为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width和 height值为源文件宽高的一半。

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

除了用 em或 px去设置文本大小, 你还可以用视窗单位来做响应式排版。 视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。 四个不同的视窗单位分别是：

vw：如 10vw的意思是视窗宽度的 10%。 vh：如 3vh的意思是视窗高度的 3%。 vmin：如70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。 vmax：如 100vmax的意思是视窗中较大尺寸的 100% (高度VS 宽度)。

（第四部分完结）