自学内容网 自学内容网
自学内容网 > 正文

记一次谷歌chrome浏览器 18 以上和 18 以下，最小字号不一致，导致的样式兼容问题解决过程

🕗 发布于 2024-11-14 23:08 chrome  前端  

**记录一次谷歌chrome浏览器 18 以上和 18 以下，最小字号不一致，导致的样式兼容问题解决过程：**


在Chrome的早期版本中，默认情况下最小字体大小被限制为12px，小于12px的设置会被重置为12px。然而，从Chrome 118版本开始，这一限制被解除。

新同事做老项目的时候，使用的浏览器版本是 130+了，最小字号限制已经解除，但是项目是老项目，并且一部分员工的电脑上用的还是 Win7 系统，根本安装不了 109以上版本的 chrome 浏览器，同事已离职，只能咱来解决了…

定位问题

在这里插入图片描述

在这里插入图片描述
很明显，样式写死，字号设置的太小，被默认字号重置，导致设置的字号无效

尝试解决方案

第一时间想到的解决方案：方案一

使用 javascript 修改浏览器默认字号，查找半天…没有，不让修改，除非用户主动且自主修改 PASS掉

尝试方案二：scale 缩放

使用 transform: scale 做缩放
未缩放前：font-size: 20px; transform: scale(1);
在这里插入图片描述
缩放后：transform: scale(0.5) 模拟 font-size: 10px;
在这里插入图片描述
测试代码：
在这里插入图片描述

可以看到，缩放后原本的占位并不变，只是看起来确实小了，要是很少或者一整块一个整体还行，但是我们这里的合同是一段段硬拼起来的，我可没功夫去一点点调样式，忒费劲，继续 暂时先PASS掉，其实我以前常用的也是 scale 这种方式突破的最小限制
其他类似方案同理：比如 canvas 缩放 转image等

方案三：rem、em

想一想做响应式的时候是怎么做的？浏览器上多小的字体都能显示出来
发动自己的小脑袋瓜子想一想 px、rem、em 的用法：

  • px（像素）‌：像素是屏幕上显示的最小单位，大小固定，不随页面缩放而改变。在响应式设计中，使用像素单位可能会导致布局在不同屏幕尺寸上显示不一致‌
  • em‌：相对长度单位，相对于父元素的字体大小。如果父元素的字体大小为16px，1em就等于16px。缺点是当嵌套元素多层时，计算起来可能会变得复杂‌
  • rem‌：相对长度单位，相对于根元素（html元素）字体大小的倍数。1rem始终等于根元素的字体大小，不受父元素影响，适合用于响应式设计‌

思考：
调试的时候，发现这里的合同样式字体大小是直接设置到一个个段落上的，根元素以前也没做过适配

  1. 默认是多少呢？
  2. 会不会也是浏览器版本不一样的时候根元素默认字体大小也不一致呢？
  3. 如果现在设置默认字体大小合适吗？

在大多数浏览器中默认字体都是 16px ，在没给 html元素 指定字体大小的时候默认都是 16px。
像火狐浏览器，默认字体大小是 小型 ，而且不同版本之间默认大小也不一定一致，所以这个感觉不靠谱
现在给 html 根元素设置默认大小？别扯了，成型的项目，现在设置了影响多大啊

最终思考了一下，感觉还是 em 比较合适
理由
相对父元素字体大小，而且当前的合同样式是已经成型的，最好是改动越小越好，涉及的地方越少越好

测试

直接 父元素设置 font-size: 20px;
在这里插入图片描述
然后 子元素添加 font-size: 0.5em;
在这里插入图片描述
但是感觉怎么好像没有 transform: scale(0.5); 的小呢，再测试一下：
直接设置为 0.2em
在这里插入图片描述
果然，em 没能突破浏览器最小字号的限制，rem 也不用测试了，原理一样的东西，也突破不了浏览器最小字号的限制。晕～～，难道非得逼着用 scale 吗？再研究研究…

测试代码：
在这里插入图片描述

方案四 SVG

回想一下 element-plus 里的 图标，使用的是 svg 实现的，就突破了最小字号大小限制，这里也做个测试
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
svg方案可以，但是这里要改动的话，就需要在最外层整个包裹一层 svg，并且内部元素都需要改造，暂时 PASS 掉

最终方案

权衡再三，还是使用 方案二：scale 方案
理由：
方案一、方案三 无效，只剩下 方案二、方案四，而 SVG 是我所不熟悉的，只能考虑用我所熟悉的 scale 来实施了，整体放大1倍，然后再使用 scale(0.5) 来缩放，最外层还是那个盒子，用超出隐藏的方式，再让内容整体居中，再做微调，这样虽然比较笨，但是可以保证这种方案可行，并且兼容性也好

不过 SVG 方案后续有时间了也会实现一份尝试一下

结果

最后实现效果：
在这里插入图片描述
完美，挺好

demo

弄个 demo 放这里，就当是讲解了
先看 demo 运行结果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            line-height: 1;
        }
        body {
            padding: 100px;
        }
        .compare{
            font-size: 12px;
        }
        .out {
            background: #efefef;
            width: 800px;
            height: 1200px;
            overflow: hidden;
        }
        .twice {
            width: 1600px;
            height: 2400px;
            font-size: 20px;
            transform: scale(0.5);
            position: relative;
            top: -50%;
            left: -50%;
        }
        .content {
            display: inline-block;
            background: #0ff;
        }
    </style>
</head>
<body>
    <div class="compare">我是 12px 的文字，和下方文字大小做比较用</div>
    <div class="out">
        <div class="twice">
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">我是 10px 的文字，和上方文字大小做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666，我是 10px 文字大小，和上方做比较用</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
            <div class="content">你好，我是喜大普奔666</div>
        </div>
    </div>
</body>
</html>

原文地址：https://blog.csdn.net/qq_38652871/article/details/143715728

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024