浏览器兼容性—学习笔记

浏览器兼容性

1、浏览器内核

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

1.2内核：

浏览器类型内核JS引擎IETridentJScriptFirefoxGeckoTraceMonkeyChromeWebKt,BlinkV8SafariWebKitSquirrelFish ExtremeOperaPrestoCarakan

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); }