【前端】兼容性处理Tips

最新推荐文章于 2024-03-16 23:39:43 发布

yqdidy

最新推荐文章于 2024-03-16 23:39:43 发布

阅读量268

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/yqdid/article/details/133789607

版权

常见的浏览器内核：

常见的浏览器内核可以分四种：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>Document</title>

    <script>

        // 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
        if(window.screen.width >= 1680){
            document.write('<link rel="stylesheet" href="css/a.css"></link>')
        }
        else if(window.screen.width >= 1600){ // 分辨率在1600~1680之间，调用此css
            document.write('<link rel="stylesheet" href="css/b.css"></link>')
        }else { // 分辨率小于1600的范围情况下，调用此css
            document.write('<link rel="stylesheet" href="css/c.css"></link>')
        }


    </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>Document</title>
    <link rel="stylesheet" href="index.css">
    <!-- 引入flexible.js文件 -->
    <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>Document</title>
  <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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </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>