移动适配
屏幕分辨率:
纵横向上的像素点数，单位是px
PC 分辨率
1920 * 1080
1366 * 768
……
缩放 150%
1920 / 150%
1080 / 150%
总结
硬件分辨率 → 物理分辨率（出厂设置）
缩放调节的分辨率 → 逻辑分辨率（软件/驱动设置）
制作网页参考 逻辑分辨率
记住一些常用的分辨率
视口：显示HTML网页的区域，用来约束HTML尺寸
<!– 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：视口宽度 = 设备宽度
l initial-scale=1.0：缩放1倍（不缩放）二倍图
概念：设计稿里面每个元素的尺寸的 倍数
作用：防止图片在高分辨率屏幕下模糊失真
现阶段设计稿参考 iPhone6/7/8 ，设备宽度 375px 产出设计稿。
二倍图设计稿尺寸： 750px
适配方案
宽度适配：宽度自适应
百分比布局
Flex 布局
等比适配：宽高等比缩放 如： rem vw
rem
rem单位，是 相对单位
rem单位是相对于 HTML标签的字号 计算结果
1rem = 1HTML字号大小
/*给 html标签加字号*/
html {font-size:30px;}
/*使用 rem单位书写尺寸*/
.box {
/*宽度会变为 150px*/
width:5rem;
/*高度会变为 90px*/
hight:3rem;
}媒体查询
媒体查询能够 检测视口的宽度 ，然后编写 差异化的 CSS 样式
当某个 条件成立 , 执行对应的CSS样式
@media (媒体特性) {
选择器 {
CSS属性
}
}
/*当视口宽度是320，网页背景色变为绿色*/
@media (width:320px) {
body {
background-color:green;
}
}目前rem布局方案中，将网页等分成 10 份， HTML标签的字号为 视口宽度 的 1/10
/*1.使用媒体查询，给不同的视口屏幕摄制不同的HTML字号*/
/*视口宽度320px,根字号为32px*/
@media (width:320px) {
html {
font-size:32px;
}
}
/*视口宽度375px,根字号为37.5px*/
@media (width:375px) {
html {
font-size:37.5px;
}
}rem – flexible.js
用来 适配移动端 的 js 库
核心原理就是根据 不同的视口宽度 给网页中 html 根节点 设置 不同 的 font-size
<body>
......
<script src="./js/flexible.js"></script>
</body>rem - 移动适配
rem单位尺寸
1. 确定基准根字号( 设计稿适配375px视口 )
查看 设计稿宽度 → 确定参考 设备宽度 (视口宽度) → 确定 基准根字号 （1/10视口宽度）
2. rem单位的尺寸
rem单位的尺寸 = px单位数值 / 基准根字号（37.5）
less
Less是一个 CSS预处理器 , Less文件后缀是 .less 。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件： Easy LESS ，保存 less文件后 自动 生成对应的 CSS 文件
单行注释
语法： // 注释内容
快捷键： ctrl + /
块注释
语法： /* 注释内容 */
快捷键： Shift + Alt + A（默认跟系统冲突，可以自己修改）
运算：
加、减、乘直接书写计算表达式
除法 需要添加 小括号 或 .
注意：表达式存在多个单位以 第一个单位 为准
.box {
width: 100 + 50px;
//在css文件结果为 width:150px;
width: 5 * 20px;
//在css文件结果为 width:100px;
width: (29 / 37.5rem);
//在css文件结果为 width:0.77333333rem; 推荐使用这个
width: 29 ./ 37.5px;
//在css文件结果为 width:0.77333333rem;
//表达式存在多个单位以第一个单位为准
width:(29px / 37.5rem);
//在css文件结果为 width:0.77333333px;
}
