移动适配两种方案
1.rem ： 目前多数企业在用的解决方案.
2.vw / vh：未来的解决方案
rem方案
rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
rem移动适配 - 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式:
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
@media(width: 414.4px) {
html {
font-size: 41.44px;
color: aqua;
}
}
使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- flexible.js是手淘开发出的一个用来适配移动端的js框架。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
1.插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小.
2.画宽度为70px 高度为50px的盒子 以375px屏幕大小为参考去适配移动端
3一般写在</body>标签上面
<style>
/* 2.画宽度为70px 高度为50px的盒子 以375px屏幕大小为参考去适配移动端 */
.box {
width: 300px;
height: 450px;
background-color: red;
font-size: 16.0013px;
}
</style>
</head>
<body>
<div class="box">秀儿</div>
<script src="./js/flexible.js"></script>
</body>
Less
编译插件
目标：使用Less语法快速编译生成CSS代码
Easy Less :
- vscode插件作用：less文件保存自动生成css文件
注释：
1.单行注释
语法：// 注释内容
快捷键：ctrl + /
2.块注释
语法：/* 注释内容 */ 快捷键： shift + alt +
运算：
1.加、减、乘直接书写计算表达式
2.除法需要添加 小括号 或 .
加
width: 20 + 300px;
减
height: 300 - 150px;
乘
margin-top: 60 * 3;
除
margin-bottom: 60 ./ 2;
margin-left: (60 / 5);
Less语法选择器
// 1.生成后代选择器
.box{
.cuo{
color: aqua;
}
}
// 2.生成子代选择器 >
.box{
.luos{
color: aliceblue;
}
}
// 3.交集选择器 &符号指代的是直接上级
.box {
&,
.coi{
color: #000;;
}
}
// 4.并集选择器
.box,.rdd{
font-size: 50px
}
// 5.伪类选择器 :hover
.box a:hover{
color: aliceblue;
}
.box{
a:hover{
color: aqua;
}
}
.box a{
&:hover{
color: #000;
font-size: 25px;
}
}
.box a{
&:hover li{
color: #000;
}
}
// 6.添加伪元素
.box a::before{
content: "";
}
// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.box {
a::before{
content: '';
}
}
.box a{
&::after{
content: '';
}
}
Less变量
// 变量 @变量名: 值;
@colskk: #ffff;
用Less导入
@import "你要导入的文件路径";
@import "./01-体验less.less";
@import url(./04-嵌套.less);
用Less导出
//out: ../css/sb/ss
注意点：
1.路径如果表示文件夹，最后一定要有/
2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
用Less禁止导出
//out:false
用Less压缩导出
// compress:true,out: ../css2/
