【前端】兼容性处理Tips
常见的浏览器内核：
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
| IE浏览器 | Trident内核，也成为IE内核 |
|---|---|
| Chrome浏览器 | Webkit内核，现在是Blink内核 |
| Firefox浏览器 | Gecko内核，俗称Firefox内核 |
| Safari浏览器 | Webkit内核 |
| Opera浏览器 | 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； |
| 360浏览器 | IE+Chrome双内核 |
| 猎豹浏览器 | IE+Chrome双内核 |
| 百度浏览器 | IE内核 |
| QQ浏览器 | Trident（兼容模式）+Webkit（高速模式） |
css兼容
1、边距重叠问题
当两个相邻元素都设置了
margin边距时，就会发生重叠，舍小取大。
解决：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
2、图片默认有间距
解决方案：使用float 给img 布局。因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距。
3、不同浏览器的标签默认( margin )和内(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
4、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
5、标签最低高度设置min-height不兼容问题；
解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{
min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
6、图片加a标签在IE9中会有边框
解决方案：img{border: none;}
7、a标签蓝色边框
解决方案： a{outline: none;}
8、IE9以下浏览器不能使用opacity
解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter
9、在Chrome中字体不能小于10px
解决方案：p{font-size: 12px; transform: scale(0.8);} 通过transfrom
JS兼容
1、事件对象的兼容
e = ev || window.event
2、滚动事件的兼容
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation;
} else {
e.cancelBubble = true;
}
4、阻止默认行为的兼容
if (e.preventDefault) {
e.preventDefault;
} else {
e.returnValue = false;
}
屏幕尺寸兼容问题
1、固定布局（静态布局）
以
像素px作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸
2、不同分辨率加载css文件
可以根据不同的屏幕分辨率，来执行对应的css文件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Documenttitle>
<script>
// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(window.screen.width >= 1680){
document.write('')
}
else if(window.screen.width >= 1600){ // 分辨率在1600~1680之间，调用此css
document.write('')
}else { // 分辨率小于1600的范围情况下，调用此css
document.write('')
}
script>
head>
<body>
body>
html>
注意：js必须写在head标签中，这样在加载页面内容之前，可以提前把css样式加载处理
3、媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
link元素中的css媒体查询：
<link rel="stylesheet" media="(max-width:800px)" href="a.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
viewport：视口
width=device-width：将布局视口设置成理想的视口
initial-scale：[0,10]：初始缩放比例，1表示不缩放
maximum-scale：[0,10]：最大缩放比例
user-scalable：yes/no：是否允许手动缩放页面，默认值为yes语法：
语法：
/* 大屏幕 */
@media only scree and (min-width:1200px){
/* 对应的样式 */
}
/* 中等屏幕 */
@media only screen and (min-width:992px) and (max-width:1199px) {
/* 对应的样式 */
}
/* 小屏幕 */
@media only screen and (min-width:768px) and (max-width:991px) {
/* 对应的样式 */
}
/* 手机端显示 */
@media only screen and (max-width:767px) {
/* 对应的样式 */
}
4、rem布局（弹性布局）
1、媒体查询结合rem布局
媒体查询动态修改
根元素大小，使得rem一直在跟着变化，响应式就成功了
2、flexble.js和rem布局
简洁高效的rem适配方案：flexible.js 它的原理是把当前设备划分为10份，但是不同设备下，比例还是一致的 我们要做的就是确定好当前设备的html文字大小
flexible.js下载地址
https://github.com/amfe/lib-flexible
引入：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="index.css">
<script src="js/flexible.js">script>
head>
<body>
body>
html>
body{
min-width: 320px;
max-width: 750px;
/* flexible给我们划分了10份，所以应该是10rem */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
}
5、 vw+vh+rem
rem布局原理：根据css的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化
可通过插件自动对rem、px等单位进行转换
scale 等比例缩放
很多的大屏适配都是使用的这种方案。
这种方案的原理就是根据宽高比例进行缩放。
前端大屏适配几种方案_前端大屏适配方案_狮子歌歌_丶的博客-CSDN博客
CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 1920px;
height: 1080px;
border: 3px solid red;
/* 设置缩放原点 */
transform-origin: left top;
box-sizing: border-box;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
li {
width: 33.333%;
height: 50%;
font-size: 30px;
list-style: none;
border: 3px solid green;
box-sizing: border-box;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
ul>
body>
<script>
// 设计稿：1920 * 1080
// 设配目标：1920 * 1080 ( 1 : 1) | 3840* 2160 ( 2 : 2 ) | 7680 * 2160 ( 4 : 2)
// 1.设计稿尺寸
let targetWidth = 1920;
let targetHeight = 1080;
let targetRatio = 16 / 9; // 宽高比率 （宽 / 高）
// 2.拿到当前设备（浏览器）的宽度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
let currentHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放（默认情况下）
// 当前宽高比例
let currentRatio = currentWidth / currentHeight;
if (currentRatio > targetRatio) {
scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放（屏幕很宽的情况下）
document.body.style = `transform: scale(${scaleRatio}) translateX(-50%); left: 50%;`;
} else {
// 4.开始缩放网页
document.body.style = `transform: scale(${scaleRatio})`;
}
script>
html>