Bootstrap - 响应式原理 //@media - 《前端杂记》

响应式所具有的特点
媒体查询

响应式所具有的特点

1，网页的宽度可以自己调整
2，尽量少用绝对宽度，px就是绝对宽度
3，字体要使用rem,em作为单位
4，布局要是使用浮动，弹性布局

媒体查询

@media
根据一个或多个基于设备类型，具体特点和环境来应用样式。
1，媒体类型
2，媒体特性
3，逻辑运算符
参考文档：https://drafts.csswg.org/mediaqueries/
@规则补充
@chartset 定义编码
@import 引入css文件（css模块化）
@font-face 自定义字体
@keyframes animation里的关键帧
@media 媒体查询

媒体查询引入方式

1，link的方式引入

<link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">

2，css样式的方式引入

 @media screen and (max-width: 375px){
            html, body {
                width: 100%;
                height: 100%;
                background-color: red;
            }
        }

3，@import的方式引入

@import 'index.css' screen and (max-width: 375px);

1，媒体类型

all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备（针对有视力障碍的人士）
注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

2，媒体特性

width 宽度
max-width 最大宽度，宽度只能比他小
min-width 最小宽的，宽度只能比他大
height 高度
max-height 最大高度，高度只能比他小
min-height 最小高度，高度只能比他大
orientation 方向
landscape 横屏（宽度大于高度）
portrait 高度（高度大于宽度）
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比（webkit内核私有属性）

3，逻辑运算符

逻辑运算符用来做条件判断
and 合并多个媒体查询（并且的意思）
, 匹配某个媒体查询（或者的意思）
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器），
当旧版浏览器不支持时，会直接解析内部样式，使用only
当浏览器不支持时，不会解析此代码

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            div{
                width: 100px;
                height: 100px;
                background: green;
                float: left;
                border: 1px solid #000;
                box-sizing: border-box;
            }
            /* <400，显示1个 */
            @media all and (max-width:400px){
                div{
                    width: 100%;
                }
            }
            /* 400-600，显示2个 */
            @media all and (min-width:400px){
                div{
                    width: 50%;
                }
            }
            /* 600-800，显示3个 */
            @media all and (min-width:600px){
                div{
                    width:33.3%;
                }
            }
            /* 800-1000，显示4个 */
            @media all and (min-width:800px){
                div{
                    width:25%;
                }
            }
            /* 1000以上，显示5个 */
            @media all and (min-width:1000px){
                div{
                    width: 20%;
                }
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </body>
</html>