一、CSS基础

1、字体图标

1、去阿里矢量库中下载字体图标 https://www.iconfont.cn/

2、引入字体图标样式表

3、第二步使用字体图标样式表【格式：iconfont 类名 …】iconfont必须要写，需要哪个字体图标类名直接写类名即可

基本使用


<!-- 第一步：引入字体图标样式表 -->
<link rel="stylesheet" href="../iconfont/iconfont.css"/>
<style>
    .iconfont{
        font-size: 20px ;
    }
</style>

<!-- 第二步：使用字体图标。【格式：iconfont 类名】iconfont必须要写 -->
<i class="iconfont icon-favorites-fill"></i>

案例-购物车图标使用


<!-- 第一步：引入字体图标样式表 -->
<link rel="stylesheet" href="../iconfont/iconfont.css" />
<!-- 自定义样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    .nav {
        width: 200px;
        margin: 50px auto;
        font-size: 12px;
    }

    .orange {
        color: #f40;
    }
</style>

<div class="nav">
    <ul>
        <li>
            <a href="#">
                <!-- 第二步：使用字体图标。【格式：iconfont 类名 ......】iconfont必须要写 -->
                <span class="iconfont icon-cart-Empty-fill orange"></span>
                <span>购物车</span>
                <span class="iconfont icon-arrow-down"></span>
            </a>
        </li>
    </ul>
</div>

2、平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

平面转换：

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换

平面转换-位移

transition属性介绍

transition: property duration timing-function delay

transition属性是个复合属性，她包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间

默认值分别为：all 0 ease 0

注：transition-duration 时长为0，不会产生过渡效果

改变多个css属性的过渡效果时：

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

transform属性介绍

官方地址：https://www.w3school.com.cn/cssref/pr_transform.asp

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

transform-基本使用

<style>
    .father {
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid #000;
    }

    .son {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* 设置过度时等其他效果 */
        transition: all 0.5s;
    }

    .father:hover .son {
        /* 参数一：水平移动的距离。参数二：垂直距离 */
        transform: translate(100px, 50px);
    }
</style>

<body>

    <div class="father">
        <div class="son"></div>
    </div>

</body>

案例-transform实现垂直居中

<style>
    .father {
        position: relative;
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid #000;
    }

    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        /* margin-left: -100px;
        margin-top: -50px; */

        transform: translate(-50%, -50%);

        width: 203px;
        height: 100px;
        background-color: pink;          
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

案例-transform实现双开门效果

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 1366px;
        height: 600px;
        margin: 0 auto;
        background: url('./images/bg.webp');
        overflow: hidden;
    }

    .box::before,
    .box::after {
        float: left;
        content: '';
        width: 50%;
        height: 600px;
        background-image: url(./images/fm.webp);
        transition: all .5s;
    }

    .box::after {
        background-position: right 0;
    }

    /* 鼠标移入的时候的位置改变的效果 */
    .box:hover::before {
        transform: translate(-100%);
    }

    .box:hover::after {
        transform: translateX(100%);
    }
</style>

<div class="box">

</div>

平面转换-旋转

使用rotate实现元素旋转效果

语法：transform: rotate(角度deg)。例：【transform: rotate(360deg)】

技巧：值取正负即可

rotate-基本使用

<style>
    img {
        transition: all 2s;
    }

    img:hover {
        /* 正数：顺时针。负数：逆时针 */
        transform: rotate(360deg);
    }
</style>
 
<img src="./images/rotate.webp" alt="旋转">

rotate-修改旋转点

格式：transform-origin: 原点水平位置原点垂直位置

官方文档：https://www.w3school.com.cn/cssref/pr_transform-origin.asp

<style>
    img {
        transition: all 2s;
        /* 修改旋转点 */
        transform-origin: right;
    }

    img:hover {
        /* 正数：顺时针。负数：逆时针 */
        transform: rotate(360deg);
    }
</style>

<img src="./images/rotate.webp" alt="图片加载失败">

transform-复合使用

<style>
    .box {
        width: 800px;
        height: 200px;
        border: 1px solid;
    }

    img {
        width: 200px;
        transition: all 0.5s;
    }

    .box:hover img {
        /* transform同时使用位移和旋转。
        如果translate和rotate同时使用，
        rotate一定放translate后面前面。
        旋转会改变坐标轴轴向*/
        transform: translate(600px) rotate(360deg);
    }
</style>

<div class="box">
    <img src="./images/tyre1.webp" alt="加载失败">
</div>

平面转换-缩放

语法”translate：scale(缩放倍数)

scale-基本使用

<style>
    .box {
        width: 300px;
        height: 210px;
        margin: 100px auto;
    }

    .box img {
        width: 100%;
        transition: all 0.5s;
    }

    .box:hover img {

        /* 大于1：放大 */
        transform: scale(1.2);
        /* 小于1：缩小 */
        /* transform: scale(0.8); */
    }
</style>      
<div class="box">
    <img src="./images/product.jpeg" alt="">
</div>

案例-视频播放按钮缩放

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    img {
        width: 100%;
    }

    .box {
        width: 249px;
        height: 210px;
        margin: 50px auto;
        overflow: hidden;
    }

    .box p {
        color: #3b3b3b;
        padding: 10px 10px 0 10px;
    }

    .box .pic {
        position: relative;
    }

    .box .pic::after {
        /* 使用为元素生成的无法显示，需要定位 */
        position: absolute;
        left: 50%;
        top: 50%;
        
        content: '';
        width: 58px;
        height: 58px;
        background-image: url(./images/play.webp);
        /* 居中和缩放 */
        transform: translate(-50%, -50%) scale(5);
        /* 过度 */
        transition: all .5s;
        opacity: 0;
    }

    /* 通过css选择器选中伪类生成的元素 */
    .box li:hover .pic::after {
        opacity: 1;
        /* 必须加上居中，否则缩放之后不会居中 */
        transform: translate(-50%, -50%) scale(1);
    }
</style>

<div class="box">
    <ul>
        <li>
            <div class="pic">
                <img src="./images/party.jpeg" alt="">
            </div>
            <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
        </li>
    </ul>
</div>

3、渐变

渐变基本使用

<style>
    .box {
        width: 200px;
        height: 200px;
        /* 渐变基本使用： 
        background-image:linear-gradient(...颜色值) */
        background-image: linear-gradient(
            transparent, 
            black
        );
    }
</style>

<div class="box"></div>

4、空间转换

透视

使用perspective属性实现透视效果

属性（添加给父级）：

perspective: 值;(单位px)
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
perspective写在父元素中

判断元素绕X、Y、Z轴旋转的方向方法：左手握住轴，大拇指方向即为箭头方向，其余四指的方向即为正数的旋转方向。

transform实现X、Y、Z轴转换

<style>
    .box {
        width: 300px;
        margin: 100px auto;
    }

    img {
        width: 300px;
        transition: all .5s;
        perspective: 1000px;
    }
    .box:hover img{

        /* 绕X轴旋转 */
        transform: rotateX(60deg);
        /* 绕Y轴旋转 */
        /*transform: rotateY(60deg);*/
        /* 绕Z轴旋转 */
        /*transform: rotateZ(60deg);*/
        /* 自定义旋转轴位置及角度（了解） */
        /*transform: rotate3d(0,0.5,1,60deg);*/
    }
</style>

<div class="box">
    <img src="./images/hero.jpeg" alt="">
</div>

3D旋转

transform-style-基本使用

<style>
    .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 1s;
        transform-style: preserve-3d;
    }

    .cube div {
        position: absolute;
        left: 0;
        right: 0;
        width: 200px;
        height: 200px;
    }

    .front {
        background-color: orange;
        transform: translateZ(200px);
    }

    .back {
        background-color: green;
    }

    .cube:hover {
        transform: rotateY(180deg);
    }
</style>

<div class="cube">
    <div class="front"></div>
    <div class="back"></div>
</div>

案例-3D导航

<title>3D导航</title>
<style>
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    } 
    .navs {
        width: 300px;
        height: 40px;
        margin: 50px auto;
    } 
    .navs li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all .5s;
        transform-style: preserve-3d; 
    } 
    .navs li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
    } 
    .navs li a:first-child {
        background-color: green;
        transform: translateZ(20px);
    } 
    .navs li a:last-child {
        background-color: orange;
        /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
        transform: rotateX(90deg) translateZ(20px);
    } 
    /* li:hover 立方体旋转 */
    .navs li:hover {
        transform: rotateX(-90deg);
    }
</style>

<div class="navs">
    <ul>
        <li>
            <a href="#">首页</a>
            <a href="#">Index</a>
        </li>
        <li>
            <a href="#">登录</a>
            <a href="#">Login</a>
        </li>
        <li>
            <a href="#">注册</a>
            <a href="#">Register</a>
        </li>
    </ul>
</div>

5、动画

使用动画

animation: 动画名称动画时常速度曲线延迟时间重复次数动画方向执行完毕时状态

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性	作用	取值	api地址
animation-name	动画名称		https://www.w3school.com.cn/cssref/pr_animation-name.asp
animation-duration	动画时长		https://www.w3school.com.cn/cssref/pr_animation-duration.asp
animation-delay	延迟时间		https://www.w3school.com.cn/cssref/pr_animation-delay.asp
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态；backwards：第一帧状态；……	https://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp
animation-timing-function	速度曲线	linear：匀速；steps(数字)：逐帧动画	https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
animation-iteration-count	重复次数	数字：循环次数；infinite：无限循环	https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp
animation-direction	动画执行方向	normal：正常播放。alternate：为反向	https://www.w3school.com.cn/cssref/pr_animation-direction.asp
animation-play-state	暂停动画	paused为暂停;running 动起来通常配合:hover使用	https://www.w3school.com.cn/cssref/pr_animation-play-state.asp

连续动画

定义动画

/* 定义动画方式一 */
@keyframes change {
    /* 如果初始状态和元素的默认样式相同，可以省略开始状态的样式 */
    from {
        css样式
    }
    to {
        css样式
    }
}

/* 定义动画方式二 */
@keyframes change2 {
    /* 如果初始状态和元素的默认样式相同，可以省略开始状态的样式 */
    0% {
        css样式
    }
    50% {
        css样式
    }
    100% {
        css样式
    }
}

动画基本使用

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        animation: change 2s;
    }

    /* 定义动画方式一 */
    @keyframes change {
        from {
            width: 200px;
        }

        to {
            background-color: yellow;
            width: 700px;
        }
    }

    /* 定义动画方式二 */
    @keyframes change2 {
        0% {
            width: 200px;
        }

        50% {
            width: 500px;
        }

        100% {
            background-color: red;
            width: 1000px;
        }
    }
</style>

<div class="box"></div>

animation-属性的使用

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        /* 动画其他属性使用 */
        animation: change 2s 0.1s infinite alternate;
        /* 默认动画状态为禁止 */
        animation-play-state: paused;
    }

    .box:hover{
        /* 当鼠标进入的时候动起来 */
        animation-play-state: running;
    }

    /* 定义动画方式一 */
    @keyframes change {
        from {
            width: 200px;
        }

        to {
            background-color: yellow;
            width: 700px;
        }
    }
</style>

<div class="box"></div>

逐帧动画

逐帧动画-使用单个动画

<style>
    .box {
        position: absolute;
        left: 0;
        width: 140px;
        height: 140px;
        background-image: url(./images/bg.webp);
        transition: all 2s;
        /* steps设置逐帧动画；infinite：无限使用 */
        animation: run 0.1s infinite steps(12);
    }
    @keyframes run {
        100%{
            background-position: -1680px 0;
        }
    }
</style>

<div class="box"></div>

逐帧动画-同时使用多个动画

语法：多个动画使用,隔开

animation:
动画1 ,
动画2 ,
动画N

使用

<style>
    .box {
        position: absolute;
        left: 0;
        width: 140px;
        height: 140px;
        background-image: url(./images/bg.webp);
        /* steps设置逐帧动画；infinite：无限使用 */
        animation:
            run 0.1s infinite steps(12),
            move 1s forwards;
    }

    @keyframes run {
        100% {
            background-position: -1680px 0;
        }
    }

    @keyframes move {
        to {
            transform: translateX(600px);
        }
    }
</style>

<div class="box"></div>

二、Flex

1、移动端特点

移动端和PC端网页不同点

分辨率

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。

默认情况下，网页的宽度和逻辑分辨率不同，默认网页宽度是980px。

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px。

2、flex基本使用

百分比布局

在flex布局出现之前，都是使用的百分比布局

百分比布局，也叫流式布局
效果：宽度自适应，高度固定。

百分比布局基本使用-京东底部导航栏

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .toolbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: pink;
        border-top: 1px solid #ccc;
    }

    .toolbar li{
        float: left;
        /* 百分比布局：宽度百分比，高度固定 */
        width: 20%;
        height: 50px;
    }
    .toolbar li img {
        height: 100%;
    }
</style>

<div class="toolbar">
    <ul>
        <li>
            <a href="#"><img src="./images/index.webp" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./images/classify.webp" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./images/jd.webp" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./images/car.webp" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="./images/login.webp" alt=""></a>
        </li>
    </ul>
</div>

flex布局

Flex布局/弹性布局：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题（边框塌陷）

Flex布局作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

使用方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

Flex组成部分：

弹性容器
弹性盒子
主轴
侧轴 / 交叉轴

Flex基本使用

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        /* 开启flex布局 */
        display: flex;
        border: 1px solid #000;
    }

    .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Flex主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center（⭐）	项目位于容器中央。
space-between（⭐）	项目在行与行之间留有间隔。
space-around（⭐）	项目在行之前、行之间和行之后留有空间。
space-evenly（⭐）	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

justify-content-基本使用

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        /* 第一步：开启flex布局 */
        display: flex;
        /* 第二步：使用justify-content做布局 */
        justify-content:space-between;
        border: 1px solid #000;
    }

    .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Flex侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值, 弹性盒子沿着主轴线被拉伸至铺满容器（不设置高度才有效果）

align-items、align-self-基本使用

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        justify-content: space-between;
        /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
        align-items: stretch;
        height: 300px;
        margin: auto;
        border: 1px solid #000;
    }

    .box div {
        /* 宽度不设置，默认为内容宽度 */
        width: 100px;
        background-color: pink;
    }

    .box div:nth-child(2) {
        /* align-self：指定设置Flex侧轴对齐 */
        align-self: center;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Flex伸缩比

使用flex属性修改弹性盒子伸缩比

属性

flex:值

取值分类

数值（整数）

注意 : 只占用父盒子剩余尺寸

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        justify-content: space-between;
        height: 300px;
        border: 1px solid #000;
    }

    .box div {
        height: 200px;
        margin: 0 20px;
        background-color: pink;
    }

    .box div:nth-child(1) {
        width: 50px;
    }

    .box div:nth-child(2) {
        flex: 3;
    }

    .box div:nth-child(3) {
        flex: 2;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex-direction修改主侧轴

使用flex-direction改变元素排列方向

Flex布局模型中，主轴默认是水平方向, 侧轴默认是垂直方向

flex-direction-属性值

属性值	作用
row	行, 水平(默认值)
column（⭐）	* 列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

flex-direction-基本使用

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box { 
        /* 第一步：开启flex */
        display: flex;
        /* 第二步：修改主轴为垂直方向，侧轴就默认为水平方向了 */
        flex-direction: column; 
        height: 300px;
        margin: auto;
        border: 1px solid #000;
    }

    .box div {
        height: 100px;
        width: 100px;
        background-color: pink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex-wrap

使用flex-wrap实现弹性盒子多行排列效果。flex不管一行有多少列都会在一行显示，如果想要当一行放不下之后换行，就需要使用flex-wrap多行排列。

flex-wrap-基本使用


<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        /* 第一步：开启flex */
        display: flex;
        /* 设置主轴对其方式 */
        justify-content: space-around;
        /* 第二步：开启多行排列效果
        如果不开启多行排列效果，弹性容器就算设置了宽度，
        也会被挤压在一行。因为是弹性容器 */
        flex-wrap: wrap;
        height: 300px;
        margin: auto;
        border: 1px solid #000;
    }

    .box div {
        height: 50px;
        width: 150px;
        background-color: pink;
    }
</style>  

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

三、移动端适配

移动端适配，长度单位rem、vw/vh

1、rem

rem基本使用

rem单位

相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

rem-设置HTML标签字号-基本使用

<style>
    html{
        /* 这里设置的字体宽度应该为视口宽度的1/10。
        这里先写死，在iphone6/7/8上测试，
        后面还有媒体查询和flexible.js等方法解决 */
        font-size: 37.5px;
    }
    .box{
        /* 这里的rem最终会转换为px，
        具体值为rem的值*html标签字体大小的值 */
        width: 4rem;
        height: 4rem;
        background-color: deepskyblue;
    }
</style> 

<div class="box"></div>

@media媒体查询

能够使用媒体查询设置差异化CSS样式，可以同时设置不同设备可视化宽度的不同来匹配不同的HTML字体大小的宽度。

媒体查询格式

@media (width:可视化宽度px) {
    html {
        font-size: 字体大小px;
    }
}

媒体查询-基本使用


<style>

    /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10。
    2、媒体查询也不是最终解决方案：
    当有其他可视化宽度的手机发布的时候，需要添加新的媒体标签 */
    @media (width:320px) {
        html {
            font-size: 32px;
        }
    }

    @media  (width:375px) {
        html {
            font-size: 37.5px;
        }
    }

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

    /* 2. 书写盒子尺寸, 单位rem */
    .box {
        width: 5rem;
        height: 5rem;
        background-color: pink;
    }
</style>

<div class="box"></div>

flexible.js

由于当媒体查询不能自适应可视化宽度，所以，flexible.js出现了。它能检测当前浏览器的可视化宽度，直接给HTML标签设置rem。

flexible.js-基本使用

<style>
    .box{
        /* 第二步：使用rem作为长度单位 */
        width: 5rem;
        height: 5rem;
        background-color: deepskyblue;
    }
</style>

<div class="box"></div>
<!-- 第一步：引入flexible.js文件 -->
<script src="./js/flexible.js"></script>

2、less

编译插件

vscode安装Easy Less插件

插件作用：less文件保存自动生成css文件

注释

单行注释：// 注释内容

块注释：/* 注释内容 */

运算

加、减、乘直接书写计算表达式

.box{
    width: 100 + 50px;
    height: 5 * 32px;
}

除法需要添加小括号或

表达式存在多个单位以第一个单位为准

选择器嵌套

语法

.父级选择器{
    // 父级样式
    .子级选择器{
        //子级样式
    }
}

选择器嵌套-基本使用

.father{
    color: red;
    .son{
        width: 100px;
    }
}

生成的css

.father{
    color: red;
}
.father .son{
    width: 100px;
}

定义变量

语法

定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;

1	@变量名称: 变量值;

变量-定义和使用

@fontColor: red;
.box{
    color: @fontColor;
}
a{
    color: @fontColor;
}

导入其他less文件

语法： @import “文件路径”;

导入样式基本使用

1
2
3

//如果是less文件，可以省略后缀
@import "library"; // library.less
@import "typo.css";

导出css文件

方法一：

配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置→搜索EasyLess →在setting.json中编辑→添加代码（注意，必须是双引号）

方法二：控制当前Less文件导出路径

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
1
// out: ./css/
1
// out: ./css/common.css

禁止导出css文件

不是所有的Less文件都需要导出CSS文件，所以，在不需要导出的less文件中配置禁止导出的配置，就不会导出css文件了。

在less文件第一行添加: // out: false

1	// out: false

3、vw / vh

vm/vh基本使用

使用vw和vh可以直接移动端适配，不需要配置媒体查询和flexible.js

vw （viewport width ）/ vh（viewport height）：相对单位，相对视口的尺寸计算结果

1vw = 1/100视口宽度

1vh = 1/100视口高度

vw和vh-基本使用

<style>
    *{
        margin: 0;
        border: 0;
        padding: 0;
    }
    .box{
        /* 宽度也可以使用vh，不一定使用vw。开发中，不会vw和vh混用 */
        width: 10vw;
        /* 高度也可以使用vw，不一定使用vh。开发中，不会vw和vh混用 */
        height: 10vh;
        background-color: deepskyblue;
    }
</style>

<div class="box"></div>

计算vw/vh值

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
- 查看设计稿宽度→确定参考设备宽度 (视口宽度) →确定vw尺寸（1/100 视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

确定设计稿对应的vh尺寸（1/100视口高度）
- 查看设计稿宽度→确定参考设备高度 (视口高度) →确定vh尺寸（1/100 视口高度）
vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

vw/vh使用经验

开发中，不会vw和vh混用，vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

四、响应式

1、媒体查询

基本语法

语法

开发常用写法

媒体特性常用写法
- max-width
- min-width

@media (媒体特性){
    选择器{
        样式
    }
}

媒体查询-基本使用

/* 视口宽度小于等于768px，网页背景#212730 */
@media (max-width:760px) {
    body {
        background-color: #212730;
    }
}

/* 视口宽度大于等于1200px，网页背景pink */
@media (min-width:1200px) {
    body {
        background-color: pink;
    }
}

媒体查询-书写顺序（重要）

如果不按照顺序书写，新的媒体查询中的样式可能会被覆盖

min-width（从小到大）
max-width（从大到小）

媒体查询-书写顺序-基本使用

@media (min-width: 768px) {
    body {
        background-color: pink;
    }
}
@media (min-width: 992px) {
    body {
        background-color: green;
    }
}
@media (min-width: 1200px) {
    body {
        background-color: skyblue;
    }
}

媒体查询-完整写法（不建议使用）

媒体查询-完整写法-语法

1 2	/* 不建议使用 */ @media 关键词媒体类型 and (媒体特性) { CSS代码 }

媒体查询-关键词

and
only
not

媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3中情况

媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait：竖屏；landscape：横屏

媒体查询外部引入

外链式CSS引入

<!-- 基本写法（建议写） -->
<link rel="stylesheet" media="(媒体特性)" href="xxx.css">  
<!-- 复杂写法（不建议写） -->
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

引入link标签-媒体拆线呢-基本使用

one.css文件
1
2
3
body{
background-color: orange;
}
two.css文件
1
2
3
body{
background-color: green;
}

html中引入

<!-- 视口宽度 >= 992px，网页背景为橙色 -->
<link rel="stylesheet" media="(min-width:992px)" href="./css/one.css">

<!-- 视口宽度 >= 1200px，网页背景为绿色 -->
<link rel="stylesheet" media="(min-width:1200px)" href="./css/two.css">

媒体查询-隐藏

媒体查询-隐藏

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
    }

    .left {
        width: 300px;
        min-height: 500px;
        background-color: pink;
    }

    .right {
        flex: 1;
        min-height: 500px;
        background-color: deepskyblue;
    }

    /* 如果检查测到视口宽度小于768px，认为是手机端，left隐藏 */
    @media (max-width:769px) {
        .left {
            display: none;
        }
    }
</style>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>