如何理解响应式网站？

什么是响应式：

        简单来说就是你页面的样式布局，会随着页面视口的大小进行自动匹配，我们知道不同的设备拥有不同屏幕大小即视口(viewport)，那么我们不可能一个样式适应所有的屏幕大小，那么响应式解决的就是网站自动去识别不同屏幕，然后去使用对应的样式去适应屏幕。

响应式技术：

        1、viewport属性：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width：把宽度设置为设备宽度（自动适应屏幕宽度）
user-scalable：不允许用户缩放 （允许用户缩放视口大小，会增加复杂度）
initial-scale=1.0：初始化缩放比例
minimum-scale=1.0：最小缩放比例
        2、媒体查询

  CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表

        CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}
        3、百分比

        通过百分比单位 " % " 来实现响应式的效果

        4、vw/vh：       

   vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一与百分比布局很相似

        5、rem：

        在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值