1.响应式的概念         随着多种终端兴起,多种规格的页面需要向用户展示。让多种终端开启页面时展示的都是相同内容,但布局更适合当前终端。         响应式也叫”自适应”页面,根据当前装置的浏览器,视口(可视区域)变化,使用媒体查询规则,将不同宽度的css写入,来改变页面变化。
 
    2.装置的宽度设定         如果写响应式或者移动端,必须有以下标签,必须有!
 
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
         width=device-width 视口宽度等于装置宽度        initial-scale=1.0 初始化视口不缩放
      3.媒体查询           媒体查询@media 给与媒体型别(可省预设pc,移动) 给与宽度范围。         宽度范围,也叫“断点”。
        4.设计响应式断点         在开发中可能使用框架做响应式,也可能自己手写响应式断点。  
        /* 手机 */
        @media (max-width:480px) {
            body {}
        }
        /* 手机横屏和pad竖屏 */
        @media (min-width:480px) {
            body {}
        }
        /* pad横屏和平板 */
        @media (min-width:768px) {
            body {}
        }
        /* 平板和小解析度pc */
        @media (min-width:980px) {
            body {}
        }
        /* 普通萤幕pc */
        @media (min-width:1200px) {
            body {}
        }
        /* 超大屏pc */
        @media (min-width:1400px) {
            body {}
        }       5.相对视口的尺寸单位                  参照vw代表视口的宽度单位,参照vh代表视口的高度单位。参照物是浏览器可视区域的比例大小0-100,可视区域不包括工作列,底部工作栏,浏览器位址列。  
1vw == 视口宽度的1%  100vw == 整个视口宽度
1vh == 视口高度的1%  100vh == 整个视口高度