前端-响应式布局-基础内容-建议一步步成长

首先给出我们必经之路的目录，然后我将一步步的写下我的成长经过

1. 媒体查询
2. BootStrap

---

1-媒体查询

1.1-体验媒体查询

        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }
        
        @media(min-width:768px) {
            body {
                background-color: red;
            }
        }

        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

1.2-媒体查询的书写顺序

        因为css具有层叠性，在做响应式布局的时候经常用到min-width和max-width两个内容。

接着来看上面那三个代码，观察我写的顺序，分别是

•   max-width:768px        
•   min-width:768px
•   min-width:1200px                

因为下面的代码会层叠上面的代码，所以可以画一条直线然后标出各自的范围观察是否被层叠性影响。

1.3-媒体查询的引用（link）