【基础知识08】响应式布局原理详解

一：响应式布局是什么

一套代码实现不同尺寸设备间，应用不同CSS样式，最终实现自适应变化效果

二：响应式布局基础知识

1. 响应式布局的原理

   1. 响应式布局的底层原理为媒体查询，通过媒体查询匹配不同的设备宽度区间，实现应用不同CSS样式的目的；

2. 媒体查询如何写

   1. 由于CSS具有层叠性，因此不同设备宽度书写顺序也有一定要求；媒体查询宽度要么遵寻从小到大，或者遵寻从大到小原则；
   2. 原因：
      如果将大于1200px的媒体查询写到大于992px的媒体查询前面，大于992px的媒体查询会覆盖1200px的媒体查询；因此，要么从小到大要么从大到小；
   3. 语法格式：

      @media (max-width:1200px) {
                  body{
                      background-color: pink;
                  }
              }
              @media (max-width:992px) {
                  body{
                      background-color: green;
                  }
              }

3.  引入方式

   1. 在style中使用
   2. 利用link引用

      1. <link rel="stylesheet" href="./03link.css" media="(min-width:768px)">

三：Bootstrap框架

封装好的响应式库