admin管理员组

文章数量:1531737

浏览器兼容性

1、浏览器内核

1.1主流浏览器：拥有自主研发内核；

1.2内核：

浏览器类型内核JS引擎
IETridentJScript
FirefoxGeckoTraceMonkey
ChromeWebKt,BlinkV8
SafariWebKitSquirrelFish Extreme
OperaPrestoCarakan

1.3 前缀，解决兼容性问题

不同内核的浏览器可以识别自己特有的css属性，浏览器遇到无法识别的css属性会直接跳过。
通过书写一些特定浏览器可识别的代码来解决兼容性问题—厂商前缀。
常见的厂商前缀：

前缀厂商示例说明
-ms-Microsoft（微软）-ms-box-sizingIE浏览器专属的CSS属性需添加-ms-前缀
-moz-Mozilla（火狐）-moz-box-sizing所有基于Gecko内核的浏览器专属的CSS属性需添加-moz-前缀
-o-Opera(欧朋)-o-box-sizingOpera浏览器专属的CSS属性需添加-o-前缀
-webkit-Webkit（谷歌/safari）-webkit-box-sizing所有基于Webkit引擎的浏览器专属的CSS需添加-webkit-前缀

1.4开发思路

垂直化：用户群体
A：渐进增强
      搭建基础结构更据用户需求，进行功能的添加（样式）；
B：优雅降级
      先把所有功能开发完成，根据用户需求，进行功能的删减（如儿童模式）。

1.5 bootstrap

栅格式布局
栅格系统行为 总是水平排列 开始是堆叠在一起的，超过这些阈值将变为水平排列
数学格式：现有容器（祖先元素，里面再加row）
row里面的内容，根据类名进行单元格的设置（宽度）

<div class="container">
    <!--容器类名必须为container-->
</div>

1.6 css 工程化
sacc:

//创建变量
//$变量名称：具体的值(可书写多个值，分隔符是空格)
$ f70:red;
$ xxx:1px solod #eeeeee；
a{
    //使用变量
    color:$f70;
    border:$xxx;
}


//创建不带参混合器 @mixin 变量名{声明块}
@mixin f70{
    margin:0;
}
ul{
    //使用混合器
    @include f70;
}
//创建带参混合器
@mixin f70($x,$y){
    display: flex;
    justify-content: $x;
    align-items: $y;
}
//使用代参混合器
div{
    @include f70(space-between,center);
}

本文标签： 兼容性学习笔记浏览器

版权声明：本文标题：浏览器兼容性—学习笔记 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725200700a1012924.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。