响应式布局

一、响应式布局的概念

总的来说：一套代码适应所有的终端（pc、移动端、ipad)，根据终端屏幕大小的不同，自动调整元素的布局

  方法：利用自媒体查询

  实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

  响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的

  例如：

  pc ：一行展示 四个 模块

  ipad ：一行展示 两个 模块

  手机   ：一行展示 一个 模块

   响应式布局原理：

* 一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；

* 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的

简单的说：响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化

自适应：元素随着屏幕发生宽高大小变化

 优缺点：优点：

* 1、减少工作量，网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变

* 2、节省设计、开发、维护成本【不再特定的维护PC页面，移动页面】

* 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题

缺点：

* 1、兼容问题（IE8以下不支持）

* 2、需要加载更多的样式和脚本文件

* 3、代码累赘，会出现隐藏无用的元素，加载时间加长

* 4、页面设计比较难于精确定位和控制

* 5、影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,)

二、响应式需要的技巧

1.设置视口标签

2.使用媒体查询

3.响应字体

4.响应图片

5.采用百分比

三、媒体查询的语法

 @media 设备类型 and (媒体特性表达式条件) { css样式 }

  媒体查询的语法：

    单个条件： @media mediaType and (media feather) {

      选择器 {

        属性名：属性值

      }

    }

    多个条件用and连接，and前后用空格隔开

    多个条件： @media mediaType and (media feather) and (media feather) {

      选择器 {

        属性名：属性值

      }

    }

    mediaType：设备类型

    media feather：媒体特性表达式

     操作符：

      and:(与、和)

      not :not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备)

      only:用来定某种特别的媒体类型。

     1.mediaType设备类型：

     all:所有的多媒体设备

     print:打印机或打印预览

     screen：电脑屏幕、平板电脑、智能手机等 (记住)

     speech：屏幕阅读器等发声设备

    2.media feather:媒体特性表达式（代码实现的条件）

     width：浏览器的宽度

     height:浏览器的高度

     max-width：最大宽度(记住)

     min-width:最小宽度(记住)

     device-width:设备宽度

     device-height:设备高度   

     max-device-width:最大设备宽度

     min-device-width:最小设备宽度

    orientation:设备的窗口朝向

         1.横屏   宽度比高度大   orientation:landscape;

         2.竖屏   高度比宽度大   orientation:portrait;

四、媒体查询常见的媒体尺寸

超小屏幕     手机        <768px

小屏幕       平板        >=768px ~ <992px  

中等屏幕      桌面       >=992px ~ <1200px

大屏幕       桌面        >=1200px    

五、移动设备优先

谁优先就将谁放在前面，默认样式就在谁的身上

   /* 默认最小屏幕是768px以下、 */

        body{

            background-color: aqua;

        }

        /* 小屏幕：768px-992px、 */

        @media screen and (min-width:768px) and (max-width:992px){

            body{

                background-color: blueviolet;

            }          

        }

        /* 中等屏幕：992px-1200px */

        @media screen and (min-width:992px) and (max-width:1200px){

            body{

                background-color: cadetblue;      

        }

    }

     /* 大屏幕：大于1200px */

     @media screen and (min-width:1200px){

            body{

                background-color: chocolate;      

        }

    }

六、大屏幕优先

  /* 哪个屏幕优先body就默认为哪个屏幕,就最先写哪个*/

        /* 默认最大屏幕优先 */

      body{

        background-color: red;

      }

      @media screen and (max-width:1200px) and (min-width:992px){

        body{

            background-color: blueviolet;

        }

      }

      @media screen and (max-width:992px) and (min-width:768px){

        body{

            background-color: blue;

        }   

      }

      @media screen and (max-width:768px){

        body{

            background-color: orange;

        }      

      }