一 主流的两种方案
rem : 目前多数企业在用的解决方案, 比如小米移动端
vw / vh:未来的解决方案,比如B站移动端
二 rem单位
相对 单位
rem单位是相对于 HTML标签的字号 计算结果
1rem = 1HTML字号大小
所以,我们只需要修改html 的文字大小,就可以完成元素大小的等比例缩放
三 媒体查询设置差异化CSS样式
媒体查询 能够 检测视口的宽度 ,然后编写 差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:414px) {
body {
background-color: pink;
}
}
四 rem适配原理
1.确定设计稿 对应 的设备的 HTML标签字号
查看 设计稿宽度 → 确定参考 设备宽度 (视口宽度) → 确定 基准根字号 (1/10视口宽度)
2. rem单位的尺寸
rem单位的尺寸 = px单位数值 / 基准根字号
五 flexible.js
flexible.js是手淘开发出的一个用来适配移动端的 js库 。
核心原理就是根据 不同的视口宽度 给网页中 html 根节点设置不同的 font-size
<script src="./js/flexible.js">
六 Less
除法运算。 CSS不支持计算写法
解决方案:可以通过Less实现
Less是一个 CSS预处理器 , Less文件后缀是 .less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
常见的预处理器还有 Sass、Stylus
注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。
Easy Less :
vscode插件
作用:less文件保存 自动生成 css文件
注意: html页面引入的还是css文件,而不是 less 文件
运算:
加、减、乘直接书写计算表达式
除法 需要添加 小括号 或 .
// 第一种除法
// margin: 100./50px;
// 第二种除法 ()
margin: (100/50px);
使用 Less嵌套 写法生成 后代选择器:
.banner {
width: 100%;
height: (160/@baseSize);
overflow: hidden;
background-color: #fff;
ul {
width: 200%;
display: flex;
}
}
使用 Less 变量设置 属性值:
把颜色提前存储到一个容器,设置属性值为这个容器名
语法:
定义变量: @变量名: 值;
使用变量: CSS属性:@变量名;
@baseSize: 37.5rem;
padding-left: (15/@baseSize);
使用 Less导入 写法引用其他Less文件:
导入: @import “文件路径”;
@import './base.less';
@import './normalize.less';
使用Less语法 导出CSS文件 :
配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是 双引号 )
"less.compile": {
"out": "../css/"
},