CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
Css需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。 不方便维护及扩展，不利于复用。Css没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出 组织良好且易于维护的CSS代码项目。
知识总结
-
em:的大小是取决于当前元素的字 体大小或者父元素的字体大小 -
Rem是一个相对单位，相对于html的字体大小 n如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改html的字体大小，那么整个页面都会同步变化.
媒体查询
媒体查询是css3语法，可以实现根据不同屏幕适配不同的样式
- 语法结构为：
@media screen and (max-width:800px) {css样式} - 总结：
Link标签也可利用媒体查询实现按需引入
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
安装要点提示：Vs code中easy less的安装
- 安装
node n利用node –v检测node是否安装成功 - 利用
npm i less –g安装less - 利用
lessc –v检测less是否安装成功 - 此处可以先不用配置，后面会采用
easy less插件 - 如果遇见 （交集|伪类|伪元素选择器）需使用
&，否则解析错误。
a {
background-color: @color;
&:hover{
background-color: @color;
}
}
.nav{
.logo{
color: #000;
}
&::before{
content: "";
}
}
再创建VS Code 中common.less文件
定义规则参考官网文档，创建好common.less文件，一定注意定义后的 ; 分号不能省略
@变量名：变量值；
@color:#FF00FF;//末尾的分号不要省略
body {
background-color: @color;
}
div {
background-color: @color;
}
编译
VSCode中安装Esay Less，保存则自动编译生成common.css文件
image.png
在index.html中将生成的.css文件引入进去即可。
image.png
less文件直接的应用
index.less中引用
@import "common";
- 生成的
index.css中包含了common.css的内容。直接引用index.css即可
rem适配方案2
- 知识总结
- 因为flexible是默认将屏幕分为10等分
- 但是当屏幕大于750的时候希望不要再去重置html字体了
- 所以要自己通过媒体查询设置一下*
- 并且要把权重提到最高!important
一个神奇的vscode插件cssrem
- Cssrem插件会自动将px转化为rem
- 但是要注意 插件默认1rem = 16px
- 需要将插件重新配置打开settting.json，根据安装的插件添加
"cssrem.rootFontSize": 75更改为自己想要的值，并重启。
网友评论