响应式原理 - 《Bootstrap》

响应式原理 —- 它之所以能够在各个尺寸都能够适配都是因为什么？
layout：布局；包含的是Bootstrap精髓部分：栅格系统；
content：内容包括网页当中的排版、表格、表单；
component：组件；Bootstrap把一些功能都做成了一个一个的组件，这个组件也是很方便的，而且包含的内容也是很多的，比如警告框；按钮、按钮组、导航、轮播图、下拉菜单、模态框、自定义的滚动条（只需要给样式和js结合的属性）
utilities：工具；一些修饰性的东西，颜色浮动定位阴影间距……统统称之为工具
exrend：扩展；字体图标，按钮，日历插入……

栅格系统是实现响应式的一个关键，那什么是响应式原理？
以星巴克网站位列，当我们改变网站尺寸的时候，这个网站也是跟着变化的，这就是响应式。
响应式特点：当我的屏幕比较大的时候，这些内容会比较多，每一个元素大小也是会变化的，为了让用户有良好的体验性，于是响应式就想了一个办法，让我们这些屏幕变小的时候，里面的内容自动换行。

网页的宽度自动调整
尽量少用绝对宽度( 百分比 )
字体的大小要是用rem（根节点的字体大小，是相对单位，r：rote根；em：就是num*根节点的字体大小）或者em为单位
布局要使用浮动或者弹性布局；

媒体查询：根据一个或者多个基于设备类型以及具体特点和环境来应用样式；
语法：
@media(@是一个规则，语句) 媒体查询：
@charset():定义编码
@import():引入插入;
@fontsize()引入字体;
@keyframes animation中的关键帧；

样式例子：（1）@media all{ 媒体特性就是条件
div{
font-size: 3rem;
}
}）
（2）
（3）@import url(‘./ .css’) （min-width:200px）
（4）@media all && (min-width : 300px){
样式
}

        @media print{/*如果你是通过打印机设备打开，那么就把字体变成80px*/
            div{
                font-size: 80px;
            }
        }

1.媒体类型：就是你使用的设备
all 所有设备
print 打印机设备
screen 彩色电脑屏幕
speech 听觉设备（针对有视力障碍的人可以把页面以语音模式呈现的设备）
注意：try、tv、projection、handeld、braille、embossed、aural等几种类型在媒体查询上已经放弃
2.媒体特性：这些设备中的属性；
width：宽度设备宽度（min-width，max-width宽度只能比这个小）
height：高度设备高度（min-height，max-height）
orientation 方向（landscape横屏【宽度大于高度】；portrait竖屏【高度大于宽度】）
aspect-ratio 宽高比
-webkit-device-pixel-ratio 像素比内核私有属性

 @media(min-width: 500px){/*最小的宽度为200px*/
            div{
                background: green;
            }
        }

3.逻辑运算符：用来做条件判断构建复杂的媒体查询
and 合并多个媒体类型（并且的意思）
, 匹配某个媒体查询（或的意思）
not 对媒体查询取反
only 仅在媒体查询匹配成功后才能应用的样式（防止老旧浏览器，因为它们可能不支持这个@media，这时候就加上一个only就可以解决）

  @media all and (min-width:400px) and (orientation: landscape;) {/*  */
            div{/* 宽度大于400px 横屏 的时候满足 */
                font-size:large
            }
        }

总结 : 媒体类型就是简单的我们使用的什么设备进行打开网络终端，
媒体特性就是这些设备的属性；
媒体逻辑运算就是用来做条件判断
https://drafts.csswg.org/mediaqueries/ 文档

实例：

     body{
             margin: 0;
         }
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
            border: 1px solid #ff0;
            box-sizing: border-box;
        }
        @media all and (max-width: 400px) {
                div{
                    width:100%;
                }
        }
        @media all and (min-width: 400px){
            div{
                width: 50%;
            }
        }
        @media all and (min-width: 600px) {
            div{
                width: 33.3%;
            }
        }
        @media all and (min-width: 800px){
            div{
                width: 25%;
            }
        }
 <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>