兼容性

Posted 2020-12-13 yangzisong

这次给小伙伴们带来兼容性的学习知识点分享

浏览器为什么会解决兼容性啦？

原因：同一个标签在页面上的默认样式不同，因此展现的效果也是不一样的。为了同一个标签在页面上的默认样式相同，所以只需要一个css就可以同意样式。

解决方案

方案1：重置文件（reset或者normalize）开源

方案2：can  i  use+前缀（主流浏览器）

 

浏览器内核

浏览器类型                                内核                                         js引擎

ie

firefox                                       trident                                         jscript

Chromr                                    webkit                                       Blink V8

Safari                                      Webkit                             SquirrelFish Extreme

Opera                                      Presto                                       Carakan

 

前缀书写格式：以-开始，以-结束

微软书写格式： -ms-
火狐书写格式： -moz-
谷歌书写格式： -webkit-
苹果书写格式： -webkit-或者-blink-
欧朋书写格式： -o-

 

开发理念：
1、用户群体（年龄，学历，地域，行业）
2、功能（高版本浏览器，低版本浏览器）

渐进增加：
先以低版本浏览器能识别的内容进行内容展示，在根据用户需求进行内容的增加。

优雅降级：
先满足所有功能需求，在根据客户和低版本浏览器进行功能的删减。

 

css工程化
.css 选择器{声明块} 规则
不同的选择器，相同的声明块（代码相同）

sass注释
默认值是单行注释 //注释内容

多行注释 /*注释内容*/

2、可以通过html层次结构，书写sass（创建时文件名必须是scss）代码，css代码是可以嵌套的

3、当不同区域（不同标签）如何批量修改
在。css文件中需要修改多次。
在sass中只需要修改一次。
变量:可以变化的量
书写格式：$变量名：变量值；

注：变量名是自定义的
变量值是属性值（变化名）；

变量的作用区域（变量的使用范围）
注意：只能用于当前标签。

【混合器】
书写格式： @mixin 混合器名{声明块}
例子：

@mixin F88{
display：flex；
justify-content：space-evenly；
align-itms：center；
}

引用混合器
@include 混合器名
例子：

@mixin divchicun ($ywidth,$yheight,$ycolor,$hyg,$ccc){
width: $ywidth;
height: $yheight;
border-style: $ycolor;
background-color: $hyg;
margin: $ccc;
}

 

div{
@include divchicun(400px, 400px, solid, red,auto);
}
p{
@include divchicun(600px, 600px, dotted, skyblue,auto);
}
footer{
@include divchicun(800px, 800px, double, blue,auto);
}

@mixin 混合器名（参1，参2，参3）{声明块}

使用：
@include 混合器名（值1，值2，值3）

注：@include值的个数可以大于@mixin的个数，不能小于@mixin的个数。

【参考数的默认值】
即参数有传的值时，就用传的值。
没有则用默认值。
书写格式
@mixin 混合器名称（变量名：默认值）
例子：@mixin F68（@divColor:red）

注：把有默认值的参数往后放
例子：
@mixin F68（$inputWidth，$divcolor;red）

 

【混合器，扩展运算符】
书写格式： @mixin 混合器名称（变量名...）

【占位符】
书写格式：%自定义（声明块）

使用时
书写格式：@extend 占位符名称
例子：@extend %f68;