第一讲 移动端（分栏、媒体查询、单位、meta元数据标签、盒子模型、em与rem的区别）

一、分栏的列数：

• column-count         列数
• column-width        列宽
• column-gap        列间距
• column-rule        列样式

p{
column-count: 4；                  栏数 列数
column-width: 200px;               栏宽 列宽
简写：columns: 200px 4;           >=800px 按栏数
                                  <800px 按栏宽
column-gap: 10px;                 栏间距 列间距
column-rule: 1px solid #FF0000;   栏框
}

注意：缩写时先写宽度，再写列数，宽度和列数之间用空格隔开即可。

二、媒体查询

形式：

@media 类型 and 条件{...}

类型的种类（screen ）：电脑屏幕，平板电脑，智能手机等。

（最大值）@media screen and (max-width:500px){
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        }
（最小值）@media screen and (min-width:200px) {
            .box{
                width: 150px;
                height: 150px;
                background-color: pink;
            }
        }

注意：（最大值max-width),要从大往小写；

          （最小值min-width)则要从小往大写。

三、单位

复习：px、em、%等等；

px        绝对单位        我们设置的大小

em        相对单位        受当前字号大小(父元素)的影响

新学：

rem        相对单位        r: root   受根HTML标签里的字号的影响

单位与媒体查询的结合：

css：
(最大值)@media screen and (max-width:800px) {
            html{
                font-size: 600px;
            }
        }
        @media screen and (max-width:500px) {
            html{
                font-size: 400px;
            }
        }
        .box{
            width: 1rem;
            height: 1rem;
            background-color: pink;
        }
html（盒子）：
<div class="box"></div>

四、 meta元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

• width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
• height：和 width 相对应，指定高度
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放，值为"yes"或"no"

五、盒子模型

盒子模型：标准盒子模型和IE盒子模型（怪异盒子模型）

标准盒子模型的大小：width+padding+border；box-sizing: content-box;

而IE盒子模型的大小：盒子大小 box-sizing: border-box;

css：
.box{
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 5px solid #9da;
        background-color: #32CD32;
        /* box-sizing: content-box; */
        /* 默认内容盒，标准盒 */
         box-sizing: border-box;
         /* 怪异盒子 盒子的大小就是设定的大小*/
     }
      /* 标准盒模型
       width，height，是内容content区域的大小
      盒子大小= width+padding+border */
html：
<div class="box"></div>

六：简答题：

em与rem的区别： 

• rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
• em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

简单的说：

em  受当前字号大小的影响

rem 受根html标签里字号大小的影响