概念
- 适配：让元素和内容在不同宽度的屏幕下所展示出的大小不一样。
- 移动适配：在移动端需要进行适配，pc端一般有版心容器，适配没有那么强烈的需求。
两种常用的适配方案
👌定宽不定高
- rem ： 目前多数企业在用的解决方案
- vw / vh：未来的解决方案
01 rem移动适配（相对单位）
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
- 移动端的视口宽度就是屏幕的宽度
- rem参照网页根元素的字体大小 ：html（1rem = 1HTML字号大小）
1.1 媒体查询
1.1.1 概念
- 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式 l
- 当某个条件成立, 执行对应的CSS样式
@media (媒体特性 —— 屏幕特性 —— 主要是指屏幕宽度）{ 对某个元素设置样式 }
1.1.2 代码样式
@media(max-width:300px){
html{
font-size: 50px;
}
}
@media(min-width:300px) and (max-width:400px) {
html{
font-size: 60px;
}
}
@media(min-width:400px){
html{
font-size: 70px;
}1.1.3 适配原理
1.2 flexible
目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- flexible.js是手淘开发出的一个用来适配移动端的js插件。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
<body>
<div class="box">hello, I am a happy girl</div>
<script src="./js/flexible.js"></script>
</body>02 Less语法
2.1 作用：Less运算写法可以完成px单位到rem单位的转换。
2.2 Less语法
注释
- // 单行注释 ：快捷键：ctrl + / （不会进行解析，意味着css文件中不会出现这个注释）
- / * 块注释：shift + alt + A（会解析到css文件）*/
运算
表达式存在多个单位以第一个单位为准
width: 100 + 100px;
width: 300 - 100px;
width: 10 * 20px;
width: (2000 / 10px );嵌套
公共样式的设置和引入
Less导入
导出CSS文件
方法一：
方法二：
禁止导出
