媒体查询&响应式布局

媒体查询：

概念：可根据设备（电脑/手机/终端设备）的尺寸，查询出适配自己的样式，可以根据用户的终端设备配对对应的样式；

共三种样式用媒体查询：

         1、外部样式表媒体查询

  ---   link  media="设备类型  and关键字  （这一定要空格） （媒体查询条件）"

          2、@import方式

  --- 

       @import  url(路径) 设备类型  and  （媒体查询的条件）；

   ---

          3、内部样式表媒体查询

    --- 

          @media  设备类型  and   (媒体查询的条件){  执行的样式  }

     ---

响应式设计：

概念：就是一个网站能够兼容多个终端设备，怎么样才能兼容多个终端设备，还是得用媒体查询，所有响应式的基本原理还是利用媒体查询；

页面头部必须有meta声明：

viewport：

viewport  视口的设置；

device-width  设备的宽；

initial-scale  初始的缩放比值；

minimum-scale   最小缩放比；

maximum-scale   最大缩放比；

user-scalable   是否允许用户缩放     no 不允许用户缩放，yes 允许用户缩放；

媒体查询优点：

1. 可以适应不同尺寸的设备；
2. 灵活性强;

媒体查询缺点：

1. 代码冗余；
2. 兼容各设备适配工作大，效率低，影响加载速度；
3. 影响视觉效果；