移动适配

rem ：

1.媒体查询
2.flexible.js

网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
适配方案
rem
vw / vh
rem单位
相对单位
rem单位是相对于HTML标签的自豪计算结果
1rem = 1HTML字号大小
rem移动适配 - 媒体查询
目标：能够使用媒体查询设置差异化CSS样式
思考：
手机屏幕不同，分辨率不同，如何设置不同的HTML标签字号？
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
*当某个条件成立，执行对应的CSS样式

写法

@media （媒体特性）{
      选择器 {
         CSS属性
    }
}

如： 
 @media （width:320px） {
            html {
                font-size: 32px;
      }
}

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            line-height: 1;
        }
        /* 以视口宽度375px为例，适配屏幕 */
        @media (width:375.2px) {
            /* 1html 根字号 37.5px = 视口宽度的 1/10 */
            html {
                font-size: 37.5px;
            }
        }

        @media (width:414.4px) {
            html {
                font-size: 41.4px;
            }
        }

        .box {
            width: 5.33rem;
            height: 5.33rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

使用rem单位设置网页元素的尺寸

思考
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
设备宽度不同，HTML标签字号设置多少合适？
设备宽度大，元素尺寸大
设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

/* 视口宽度320px，根字号为32px */
@media （width: 320px） {
      html {
        font-size: 32px;
    }
}

/* 视口宽度375px，根字号为37.5px */
@media (width: 375px) {
      html {
        font-size: 37.5px;
    }
}

/* 视口宽度414px， 根字号为41.4px */
@media (width: 414px) {
      html {
          font-size: 414.4px;
    }
}

rem适配原理

rem单位尺寸
1.根据视口宽度，设置不同的HTML标签字号
2.书写代码，尺寸是rem单位
2.1确定设计稿对应的设备HTML标签字号
查看设计稿宽度 → 确定参考设备宽度（视口宽度） → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号

flexible

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
1.flexible.js是手淘开发出的一个用来适配移动端的js框架。
2.核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

<body>
      <div class="box"></div>
       /* 引入移动适配的js文件 */
      <script src="./js/flexible.js"></script>
</body>

Less

目标：使用Less语法快速编译生成CSS代码

Less是一个CSS预处理器，Less文件后缀是.Less
扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
Less文件保存自动生成css文件

Less语法

注释：
单行注释
语法： //注释内容
快捷键：ctrl + /
块注释
语法： /* 注释内容 /
快捷键：* shift + alt + A **
运算：
加、减、乘直接书写计算表达式
除法需要添加小括号或 .
注意：
表达式存在多个单位以第一个单位为准

实例

/*
    less计算：
    + - * 除法./或者()

    对less文件的解释：
        less文件只是方便程序员写代码，实际上在 HTML 中要引用的还是css文件

    注意点：
    1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
    2.运算符的前后，要么都加空格隔开，要么都不加
    3.将单位统一的方法：ctrl + A全选然后再按 alt + Z 可以将单位统一为 rem / px
*/

.box {
    width: 100 + 100px;
    height: 400px - 200 ;
    font-size: 5 * 6px;
    // 这个单位如果写在外面是会有空格，写在里面是没有空格的美观，写在外面不兼容
    width: (400 / 2px);
}

.box1 {
    // 单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为
    width: 100px + 200deg + 300rem;
    // 这种情况是不能做运算的，需要注意
    height: 20 +30px;
    // (./)这是个除法运算，只是less不兼容，不建议用(./)这个除法表达式来做运算
    // font-size: 60 ./ 3px;
}

能够使用Less嵌套写法生成后代选择器

// 1.生成后代选择器
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;

    .title {
        width: 100px;
        height: 100px;
        background-color: pink;

        // .left / .right 属于同级选择器
        .left {
            width: 50px ;
            height: 50px;
            background-color: green;
        }

        .right {
            width: 50px ;
            height: 50px;
            background-color: purple;
        }
    }
}

// 2.生成子代选择器 >
.father {
    width: 400px ;
    height: 400px;
    background-color: skyblue;

    >.son{
        width: 200px;
        height: 200px ;
        background-color: pink;

        >.sun{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    }
}
// 3.交集选择器 &符号指代的是直接上级
.box1{
    width: 100px;
    height: 100px;
    background-color: skyblue;

    &.box2 {
        width: 50px;
        height: 50px;
        background-color: pink;
    }

    span {
        &.box3 {
            background-color: blue;
        }
    }
}

// 4.并集选择器
.box1,
.box2
 {
    width: 100px;
    height: 100px;
    background-color: green;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: skyblue;

    &,
    .box2 {
        width: 50px;
        height: 50px;
        background-color: pink;
    }
}

// 5.伪类选择器  :hover
.box {
    a:hover {
        background-color: #333;
    }
}

.box {
    a {
        &:hover {
            background-color: #444;
        }
    }
}

.box {
    li:hover {
        a {
            background-color: pink;
        }
    }
}

.box {
    li {
        &:hover {
            a {
                background-color: #666;
            }
        }
    }
}

// 6.添加伪元素
.box {
    li {
        a::before {
            content:'';
            background-color: #555;
        }
    }
}

.box {
    li {
        a {
            &::before {
                content: '';
            }
        }
    }
}

// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.box {
    li:first-child {
        background-color: #fff;
    }
}

.box {
    li {
        &:nth-child(2) {
            background-color: #fff;
        }
    }
}

嵌套

作用：快速生成后代选择器
语法：

.父级选择器 {
    // 父级选择器 
    .子级选择器 {
       // 子级样式
    }
}
// 示例
.father {
   color: red;
  .son {
    width: 100px;
  }
}
// 生成
.father {
  color: red;
}
.father .son {
  width: 100px;
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

.father {
  color: red;
  &:hover {
    color: green;
  }
}

// 保存为
.father {
  color: red;
}
.father:hover {
  color: green;
}

变量

方法二：把颜色提前存储到一个容器，设置属性值为这个容器名 l 变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值; **
使用变量：CSS属性：@变量名;
开发网站时，网页如何引入公共样式？
CSS：书写link标签
Less：导入
导入：@import "文件路径";

// 如果是less文件，可以省略后缀.less
@import 'base.less';
@import '01-体验less';

// @import "你要导入的文件路径";
// 注意：分号结尾
// 写法一：
@import "./03-计算.less";
// 写法二：
@import url(./04-嵌套.less);

@import "./05-变量.less";

Less:导出

方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码，注意文件夹名称后面添加

// out: ./css/
// out: ./css/common.css

// out: ./css/
/*
注意点：
 1.路径如果表示文件夹，最后一定要有/
    注意：如果路径在最后那里没有添加"/"那么它仅仅表示的是文件名
    导出文件夹：// out: ./css/
 2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
*/

禁止导出
在less文件第一行添加:（ // out: false ）

// out: false
// 禁止导出

综合案例（HTML）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游乐园</title>
    <!-- 引入网页主题图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入第三方文件 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 引入由 less 生成的 css 文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 轮播图 banner -->
    <div class="banner">
        <img src="./uploads/banner_1.png" alt="">
    </div>
    <!-- 轮播图 banner -->

    <!-- 乐园活动 -->
    <h3>乐园活动</h3>
    <!-- 乐园活动 -->

    <!-- 活动卡片 -->
    <div class="card">
        <ul>

            <li>

                <!-- 添加两个定位元素 -->
                <!-- 1.进行中 -->
                <div class="run">
                    进行中
                </div>
                <i class="iconfont icon-shoucang1 collcet"></i>

                <a href="#">
                    <img src="./uploads/item_1.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                        </p>
                        <span>免费</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已报名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六开始
                    </div>
                </div>
                </a>
            </li>

            <li>
                <!-- 添加两个定位元素 -->
                <!-- 1.进行中 -->
                <div class="end">
                    已截止
                </div>
                <i class="iconfont icon-shoucang1 collcet"></i>

                <a href="#">
                    <img src="./uploads/item_2.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                        </p>
                        <span>免费</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已报名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六开始
                    </div>
                </div>
                </a>
            </li>

            <li>

                <!-- 添加两个定位元素 -->
                <!-- 1.进行中 -->
                <div class="end">
                    已结束
                </div>
                <i class="iconfont icon-shoucang collcet1"></i>

                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                            疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
                        </p>
                        <span>免费</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已报名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六开始
                    </div>
                </div>
                </a>
            </li>
            
        </ul>
    </div>
    <!-- 活动卡片 -->

    <!-- 底部 -->
    <footer>
        <a href="#">
            <i class="iconfont icon-index-copy icon1"></i>
            首页
        </a>

        <a href="#">
            <i class="iconfont icon-youhuiquan icon2"></i>
            卡券
        </a>

        <a href="#">
            <i class="iconfont icon-iconfront- icon3"></i>
            我的
        </a>
    </footer>
    <!-- 底部 -->

    <!-- 引入移动适配js文件 -->
    <script src="./js/flexible.js"></script>
    <!-- 引入移动适配js文件 -->
</body>
</html>

综合案例（Less 保存自动生成CSS文件）

@import url(./base.less);

body {
    background-color: #F0F0F0;

    // 预留底部高度
    padding-bottom: 1.3067rem;
}

// 存放主题文字颜色
@themeColor: #3C3C3C;

// 让图片大小适配任何移动端屏幕
img {
    width: 100%;
}

// 存放超出两行以省略号显示
.twoLines {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

// 乐园活动 
h3 {
    // 设置标题的字号大小
    font-size: 0.3733rem;
    // 标题四周的边距
    margin: 0.2667rem 0 0.2667rem 0.4rem;
}

// 活动卡片 
.card {

    li {
        // 给每个 li 标签都添加一个下边距
        // a 设置为块级元素，给 a 标签设置尺寸直接撑开 li 标签的大小
        margin-bottom: 0.2667rem;
        // 父相
        position: relative;

        // 遮罩层
        &:last-child::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }

        a {
            // 将 a 设置为块级元素，扩大点击范围
            display: block;
            height: 6.6667rem;
            background-color: #fff;

            // 将图片以下的空间用一个盒子包裹
            .desc {
                padding: 0 0.4rem;

                // 将文本上部分用一个盒子包裹布局
                .title {
                    font-size: 0.4rem;
                    // 添加弹性容器
                    display: flex;
                    // 主轴一左一右排列
                    justify-content: space-between;
                    margin: 0.2133rem 0 0.4rem;

                    // 用 p 标签来填充左边的内容
                    p {
                        // 添加固定的宽度，防止挤压到右边的内容
                        width: 6.9067rem;
                        // 存放主题文字颜色(设置默认的字体颜色)
                        color: @themeColor;
                    }

                    span {
                        color: #FE6249;
                    }
                }

                .total {
                    font-size: 0.2933rem;
                    color: #b4b4b4;

                    i {
                        // 文字垂直中部对齐
                        vertical-align: middle;
                    }

                    .qizhi {
                        margin-right: 0.1867rem;
                        font-size: 0.2667rem;
                    }

                    .shizhong {
                        margin-left: 0.4rem;
                        margin-right: 0.1333rem;
                        font-size: 0.2667rem;
                    }
                }
            }

        }

        .run {
            position: absolute;
            left: 0.3733rem;
            top: -0.1067rem;
            width: 1.8133rem;
            height: 0.7733rem;
            background: url(../images/status_active.png);
            background-size: 1.8133rem 0.7733rem;
            font-size: 0.32rem;
            color: #fff;
            padding-left: 0.3733rem;
            padding-top: 0.1333rem;
        }

        // li 标签的第二个定位元素，样式都是一样的，就是字体图标用到的有所区别而已
        .collcet {
            position: absolute;
            right: 0.48rem;
            top: 0.4rem;
            font-size: 0.64rem;
            color: #fff;
        }

        // 第二第三个 li 标签的定位的第一个元素
        .end {
            position: absolute;
            left: 0.3733rem;
            top: -0.1067rem;
            width: 1.8133rem;
            height: 0.7733rem;
            background: url(../images/status_default.png);
            background-size: 1.8133rem 0.7733rem;
            font-size: 0.32rem;
            color: #fff;
            padding-left: 0.3733rem;
            padding-top: 0.1333rem;
        }

        // 第三个 li 标签定位的第二个元素
        .collcet1 {
            // 子绝
            position: absolute;
            right: 0.48rem;
            top: 0.4rem;
            font-size: 0.64rem;
            color: #FECA49;
            // 设置权重的级别
            z-index: 2;
        }
    }
}

// 底部 
footer {
    // 添加弹性容器
    display: flex;
    // 固定定位：脱标（设置宽高）
    position: fixed;
    left: 0;
    bottom: 0;
    width: 10rem;
    height: 1.3067rem;
    background-color: #FECA49;

    a {
        // 均分父容器的尺寸
        flex: 1;

        // 添加弹性容器，将内容垂直布局
        display: flex;

        // 改变主轴方向
        flex-direction: column;
        // 主轴垂直居中 jcc
        justify-content: center;
        // 侧轴水平居中 aic
        align-items: center;
        // 设置字体大小
        font-size: 0.2933rem;
        // 内容水平居中
        text-align: center;
        color: #D78B09;

        // 字体图标的大小(用法跟字体的样式是一样的)
        .icon1 {
            font-size: 0.5653rem;
        }
        .icon2 {
            font-size: 0.4533rem;
        }
        .icon3 {
            font-size: 0.5973rem;
        }

        // :active 模仿 hover 效果，鼠标按下未抬起
        &:active {
            color: #fff;
        }
    }
}

移动适配

移动适配

rem ：

写法

案例

使用rem单位设置网页元素的尺寸

rem适配原理

flexible

Less

Less语法

实例

嵌套

变量

综合案例（HTML）

综合案例（Less** 保存自动生成CSS文件 **）

推荐阅读更多精彩内容

综合案例（Less 保存自动生成CSS文件）