浏览器兼容性—学习笔记

浏览器兼容性

1、浏览器内核

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

1.2内核：

浏览器类型	内核	JS引擎
IE	Trident	JScript
Firefox	Gecko	TraceMonkey
Chrome	WebKt,Blink	V8
Safari	WebKit	SquirrelFish Extreme
Opera	Presto	Carakan

1.3 前缀，解决兼容性问题

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

前缀	厂商	示例	说明
-ms-	Microsoft（微软）	-ms-box-sizing	IE浏览器专属的CSS属性需添加-ms-前缀
-moz-	Mozilla（火狐）	-moz-box-sizing	所有基于Gecko内核的浏览器专属的CSS属性需添加-moz-前缀
-o-	Opera(欧朋)	-o-box-sizing	Opera浏览器专属的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);
}

浏览器兼容性—学习笔记相关推荐

计算机运行新ie 命令,(新)计算机应用基础IE浏览器设置学习笔记——精品.doc
计算机应用基础IE浏览器设置学习笔记一.IE浏览器设置简介 Internet Explorer浏览器(简称IE浏览器)是能够接收用户的请求信息,并到相应网站获取网页内容的专用软件.IE浏览器的使用和 ...
计算机应用基础IE浏览器设置,计算机应用基础IE浏览器设置学习笔记
IE浏览器的基本设置计算机应用基础IE浏览器设置学习笔记一.IE浏览器设置简介 Internet Explorer浏览器(简称IE浏览器)是能够接收用户的请求信息,并到相应网站获取网页内容的专用软 ...
计算机应用基础IE浏览器设置,(计算机应用基础IE浏览器设置学习笔记.doc
(计算机应用基础IE浏览器设置学习笔记计算机应用基础IE浏览器设置学习笔记一.IE浏览器设置简介 Internet Explorer浏览器(简称IE浏览器)是能够接收用户的请求信息,并到相应网站获 ...
浏览器内核学习笔记二
对于navigator.appVersion有很多疑问,继续学习,对于一个懒人来说首先百度,没找到appVersion找到了navigator.userAgent 你是否好奇标识浏览器身份的User- ...
Cypress 启动本地浏览器的学习笔记
下列两种命令启动 Cypress: yarn run cypress open npx cypress open 文档地址:https://docs.cypress.io/guides/guides/ ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
amazeui学习笔记一（开始使用3）--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
vue 使用了浏览器的刷新之后报错_Laravel 7 + vue.js 学习笔记（一）
laravel laravel是php为底层所写的框架,和大多数的开源框架一样使用了mvc模式,在使用的时候使用了一些编程语言的高级特性,如:解决类与类之间依赖的问题引入了依赖注入(DI),管理多个类 ...

浏览器兼容性—学习笔记

浏览器兼容性

浏览器兼容性—学习笔记相关推荐

最新文章

热门文章