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：

<style>
  p {
    font-size: 20px;
    }
  @media(max-height:800px){ 
  //当设备高度小于或等于800px时，改变 p 标签中字的大小。
    p{
        font-size:12px;
    }
  }
</style>
<p>Lorem  adipiscing elit. Vivamus quis tempus massa. Aenean.</p>

2、图片的自适应

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

<style>
  img{
    display:block;
    max-width:100%;
    height:auto;
  }
</style>
<img src="https://s3.amazonaws.com/Pack.jpg" alt="freeCodeCamp stickers set">

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

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

<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="一张高质量的图片">

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

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

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

<style>
  h2{
      width:80vw;
  }
  p{
      width:75vmin;
  }
</style>

（第四部分完结）