CSS-5

移动端适配

屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

电脑常见分辨率：
	1920 * 1080
	1336 * 768
	...

硬件分辨率 -> 物理分辨率（出厂设置）
缩放调节后的分辨率 -> 逻辑分辨率（软件/驱动设置）

视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口：显示HTML网页的区域，用来约束HTML的尺寸
width=device-width <==> 视口宽度=设备宽度（即设备逻辑分辨率的宽度）
initial-scale=1.0  <==> 缩放1倍（即不缩放）

二倍图

概念：设计稿里面每个元素的尺寸都是2倍
作用：防止图片
举例：网页需要一个100px的图片，设计稿就画一个200px的图片，在小屏幕显示100px，在大屏幕显示就100px~200px

适配方案

宽度适配：宽度自适应
	1.百分比布局
	2.Flex布局
	
等比适配：宽高等比缩放
	1.rem
	2.vw

rem 适配方案

认识 rem

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

    /* 第一步：给HTML标签加字号 */
    html {
        font-size: 30px;
    }

    /* 第二步：使用rem单位书写尺寸 */
    .box {
        width: 5rem;
        height: 3rem;
        background-color: pink;
    }
</style>

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

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

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

媒体查询

<style>
    /* 要求：通过"媒体查询"的方法，实现当视口宽度为375px时，网页背景色是绿色 */
    @media (width:375px) {
        body {
            background-color: green;
        }
    }
</style>

1.什么是"媒体查询"：
不同手机屏幕大小不同，分辨率不同，通过"媒体查询"我们可以设置不同的HTMl标签字号，让HTML标签字号大小动态变化，rem也就随之动态变化

2.具体内容：
	媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
	当某个条件成立，执行对应的CSS样式
	
3.格式：
    @media (媒体特性) {
        选择器 {
            CSS属性
        }
    }

rem + flexible.js

引入flexible.js库：

<body>
    ...
    <script src="./js/flexible.js"></script>
</body>

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

    .box {
        width: 5rem;
        height: 3rem;
        background-color: pink;
    }
</style>

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

    <script src="./js/flexible.js"></script>
</body>

flexible.js 是某团队开发出来的一个专门用来适配移动端的js库
核心原理：根据不同的视口宽度，给网页中HTML根节点设置不同的font-size

px 转 rem

rem 单位尺寸：

1. 确定基准根字号
	查看设计稿宽度 -> 确定参考设备宽度（视口宽度） -> 确定基准根字号（1/10的视口宽度）

2. rem 单位的尺寸 = px单位数值 / 基准根字号

less

less 简介

1.简介：
    less是一个CSS预处理器，less文件后缀是.less
    less扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

2.注意：
	a. 浏览器不识别less代码，目前阶段，网页要引入对应的CSS文件
	b. VS Code 插件：Easy LESS，保存less文件后自动生成对应的CSS文件
	c. less支持嵌套写选择器（补充：现在主流的浏览器也支持CSS嵌套写选择器了）

less 注释

单行注释：
	语法：
		// 注释内容
		
	VS Code快捷键：
		Ctrl + /

块注释：
    语法：
    	/* 注释内容 */
		
	VS Code快捷键：（此快捷键可能与系统的截图快捷键冲突，可以自行修改）
		Shift + Alt + A

less 运算

.box {
    width: (150 / 37.5rem);
}

运算：
	加、减、乘直接书写计算表达式
	除法需要添加"()"或"."

例如：
	width: (100 / 4px); 或者 width: (100 ./ 4px);

less 嵌套

.father {
    color: red;

    .son {
        width: 200px;

        a {
            color: green;

            // & 的代表的是当前标签，
            &:hover {
                color: blue;
            }
        }

        // 上面的一个a标签的代码，与下面的两个a标签代码等效
        a {
            color: green;
        }
        a:hover {
            color: blue;
        }
    }
}

作用：快速生成后代选择器
& 符号表示的是——当前选择器，代码写到谁的大括号里面就代表谁，不会生成后代选择器，常用于hover伪类或nth-child结构伪类

less 变量

// 1. 定义变量
// 优点：在这里修改颜色，整个网页的颜色都能立刻被修改！
@myColor:pink;

// 2. 使用变量
div {
    color: @myColor;
}

p {
    color: @myColor;
}

a {
    color: @myColor;
}

作用：存储数据，方便使用和修改
语法：
	定义变量：@变量名:数据;
	使用变量：CSS属性:@变量名;

less 导入

    @import "./base.less"
    @import "./common.less"

作用：
	导入less公共样式文件

语法：
	@import "文件路径"
	
提示：
	如果是less文件可以省略后缀
	例如：
		@import "./base.less"
		@import "./common"		// 此处省略了后缀

less 导出

// out: ./css/index.css

导出写法：
	在less文件的第一行添加：
	// out: 文件URL
	
禁止导出：
	在less文件的第一行添加：
	// out:false

vw 适配方案

认识 vw

vw 是一个单位，而且是一个相对单位，相对于"视口的尺寸"计算结果

vw：viewport width
	1 vw = 1/100 视口宽度

vh：viewport height
    1 vh = 1/100 视口高度

vw 和 vh 是相对视口的宽高计算结果，可以直接实现移动端适配效果！！
	
记忆：
	因为 1 vw = 1/100 视口宽度，即相当于视口宽度（屏幕）的 1%

px 转 vw

1. 确定设计稿对应的vw尺寸（1/100视口宽度）
	查看设计稿宽度 -> 确定参考设备宽度（视口宽度）-> 确定vw尺寸（1/100视口宽度）

2. vw单位的尺寸 = px数值 / （1/100 视口宽度）

vh 单位问题

在开发中，vw 和 vh 不能混用!

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

实际开发中，通常使用vw，特殊情况用vh，但是不能同时使用！