标签：适应 浏览器 设置 体验 conf 原因 标准 nod link
作用：favicon 中文译名是收藏夹图标，不仅是网站的头像，也是其可以让浏览器的收藏夹中除了显示相应的标题外，还以图标的方式区分不同的网站。 FF 浏览器还支持动态的 favicon，让你的网站更有个性。favicon 在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。
引用：
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">
尺寸：16x16 32x32
webpack 打包 ：
//html-webpack-plugins 来处理 html的话，这个插件已经提供了 favicon
const htmlPlugin = new HtmlWebpackPlugin({
favicon: path.resolve(publicDir, ‘./imgs/favicon.ico‘)
});
pluginsConfig.push(htmlPlugin);
概念：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况；而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的
解决思路和方案：
使用CSS Hack解决兼容性问题
浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种
代码本身有问题，如： bg:red ，bg并不是一个有效的css属性
代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本身没有问题，但由于使用的是CSS3的属性box-sizing ，会造成在一些低版本内核的浏览器中无法识别。 总之，当浏览器遇到这些无法识别的代码时，浏览器不会中止程序的执行，它会立即跳过这些无法识别的代码，就当作没看见一样，继续执行后面的代码
.main{
color1 : red; /*这句代码无法被浏览器识别，浏览器就当这句代码不存在*/
color: green;
}
浏览器方面，除了拥有这种特殊的错误处理方式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有自己独特的CSS属性，这些属性在CSS标准之外。造成这种现象的原因是一些历史遗留问题。比如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒子宽高影响范围的，但其他内核的浏览器是无法识别该属性的。
浏览器CSS样式初始化：由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样
*{
margin: 0;
padding: 0;
}
渐近增强和优雅降级
优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的供给。优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应新版本浏览器的需要。优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性
.transition {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
使用现代化的CSS插件解决兼容问题
标签：适应 浏览器 设置 体验 conf 原因 标准 nod link
原文地址：https://www.cnblogs.com/EricZLin/p/13282162.html
