兼容性

Posted yangzisong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容性相关的知识,希望对你有一定的参考价值。

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

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

原因:同一个标签在页面上的默认样式不同,因此展现的效果也是不一样的。为了同一个标签在页面上的默认样式相同,所以只需要一个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;

 

以上是关于兼容性的主要内容,如果未能解决你的问题,请参考以下文章

系统兼容性与软件兼容性

springframework的兼容性

JQUERY的兼容性

什么是兼容性测试?兼容性测试侧重哪些方面?

什么是兼容性测试?兼容性测试侧重哪些方面?

谷歌浏览器兼容性视图设置在哪里(chrome浏览器兼容性视图设置在哪)