媒体查询和栅格系统的原理

本文目录：

1.媒体查询的概念
2.媒体查询的常用写法
3.栅格系统
4.响应式工具

1.媒体查询的概念

媒体指的就是各种设备 (移动设备, PC设备)。
查询指的是要检测属于哪种设备。
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。
怎么使用媒体查询： @media
核心语法示例： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}，上面这属于内嵌式语法，针对一些仅在部分设备下才需要加载的css或者js文件，我们可以利用媒体查询的外链式语法，如<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
通常情况下，将设备容器依据宽度的大小分为以下四种：
- 在超小屏设备的时候 768px以下
- 在小屏设备的时候 768px-992px
- 在中屏设备的时候 992px-1200px
- 在大屏设备的时候 1200px以上

2.媒体查询的常用写法

大型设备（大台式电脑，1200px 起）
@media screen and (min-width:1200px){ ... }
中型设备（台式电脑，992px 起）
@media screen and (min-width:992px){ ... }
小型设备（平板电脑，768px 起）
@media screen and (min-width:768px) { ... }
超小设备（手机，小于 768px）
@media screen and (min-width:480px){ ... }
范围界定：当屏幕宽度大于640px且小于1000px的时候
@media screen and (max-width: 1000px) and (min-width: 640px) { ... }

3.栅格系统

了解栅格系统的原理，首先需要了解什么是栅格化。
在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，“参考线”），将平面划分成有规律的一系列“格子”（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。通俗点来说，就是人为的把网页中的一行，等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发，这就栅格化。
知道什么是栅格化后，首先我们先来实现一个最简单的栅格系统

.col1  {width: 8.33%}
.col2  {width: 16.66%}
.col3  {width: 25%}
.col4  {width: 33.33%}
.col5  {width: 41.66%}
.col6  {width: 50%}
.col7  {width: 58.33%}
.col8  {width: 66.66%}
.col9  {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}

把上面的样式添加到对应的元素上就可以把元素指定为对应的比例。
在响应式容器中，结合 @media 媒体查询，我们可以做得更多。
相信用过 bootstrap 栅格化系统的都知道，在 bootstrap 栅格化系统中，有一些 col-md col-sm 属性，它们是干什么用的呢？
其实，它们都是栅格化系统的 CSS 类名，只是针对了不同的屏幕宽度。

假如我们有这样的一个需求：
在 PC 上，因为屏幕比较大，我们要求一行显示 4 列的内容。但是在手机上，因为屏幕比较小，要求一行显示 3 列的内容。
即一个网站同时适配 PC 和手机端，根据不同的端自动调整页面。
此时，我们可以这样做：

@media (min-width: 1200px) {
    .col-md1  {width: 8.33%}
    .col-md2  {width: 16.66%}
    ......
}
@media (max-width: 1199px) {
    .col-md1  {width: 8.33%}
    .col-md2  {width: 16.66%}
    ......
}

给对应的元素添加上相应的类名：

<div class="app">
    <div class="col-md3 col-sm4"></div>
    <div class="col-md3 col-sm4"></div>
    <div class="col-md3 col-sm4"></div>
    <div class="col-md3 col-sm4"></div>
</div>

这样就实现了：一个 div，同时设置两个类名。当屏幕 >=1200px 时，一行显示 4 列，当屏幕 <1200px 时，一行显示3列，而且是浏览器自动调整。
boostrap中的相应类名的含义：
列：col - *** - *** => 不确定（参数）
col：列样式
第一个：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个***：每一行的分等份，默认分成12等份，数字代表的是占多少份

栅格系统的嵌套和偏移

<div class="col-xs-6 col-xs-offset-1"></div>向右偏移一格
<div class="col-xs-3 col-xs-push-9">col-xs-3</div>向后推9格
<div class="col-xs-9 col-xs-pull-3">col-xs-9</div>向前拉3格

4.响应式工具

响应式工具实现原理：
以下代码实现了带有类名.box的元素：
大屏设备显示
中屏设备隐藏
小屏设备显示
超小屏设备隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (min-width: 1200px){
            .box{
                display: block;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            .box{
                display: none;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            .box{
                display: block;
            }
        }
        @media screen and (max-width: 768px){
            .box{
                display: none;
            }
        }
    </style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>

响应式工具（bootstrap版）

大屏设备显示
中屏设备隐藏
小屏设备显示
超小屏设备隐藏
visible-lg 大屏显示其他隐藏
visible-md
visible-sm
visible-xs
3.2版本以后建议使用hidden
hidden-lg
hidden-md
hidden-sm
hidden-xs

媒体查询和栅格系统的原理