响应式布局

简要：就是根据不同设备访问同一个站点时，内容响应式的变化。css3处理， @media。
如：

css写法：
// 屏幕最小宽度为1000px时(包括1000px)
@media srceen and (min-width: 1000px) {
  h2{
    font-size: 24px;
  }
}
// 屏幕宽度 640px~999px 时
@media srceen and (min-width: 640px) and (max-width: 999px) {
  h2{
    font-size: 18px;
  }
}

// 屏幕小于宽度 639px
@media srceen and (min-width: 639px) {
  h2{
    font-size: 12px;
  }
}

sass写法：
.wrap{
     @media screen and (min-width: 1900px) {
           font-size: 90px;
       }
      @media screen and (min-width: 1200px) and (max-width: 1899px){
           font-size: 180px;
       }
}

除了在同一个css文件中处理不同设备的样式外，我们还可以通过link，根据不同的设备，找到相应的样式文件：

图片处理：

1：一般背景图片处理，使用media，可以使用不同图片，或者使用background-size 调整其大小或者百分比，使其自适应。

2：img 图片的处理，使用 js判断不同设备，从而展示对应大小图片，或者使用 picture 标签

图片分为背景图片和通过img标签引入的图片，背景图片可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。

如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。

img 使用picture

其中的img元素是默认情况下显示的图片源，在其上面的两个source元素则是在特定媒体查询（media queries）条件下显示的图片——这也是开发者所喜欢的一种解决方案。

参考：https://www.zhihu.com/question/23346183/answer/24374133
参考：http://caibaojian.com/3-solutions-for-responsive-image.html

文字大小

文字大小单位有 px、百分比、em、rem，推荐使用em，或者rem

em：
弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是：

• 相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个
  设置字体大小为“16px”，此时这个

  的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

参考: https://www.w3cplus.com/css/px-to-em © w3cplus.com

rem：
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

注意：
在移动设备中声明原始大小显示和是否缩放的声明：

meta标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。
可以使用的参数设置如下：
width：viewport的宽度
height：viewport的高度
initial-scale：初始的缩放比例
minimun-scale：允许用户缩放到的最小比例
maximun-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩放