前端开发攻略---打破Chrome的最小字号限制,设置任意字号大小

目录

1、原因

2、解决方法


1、原因

由于Chrome浏览器的限制,在网页中的字号默认最小为12px,更改为12px以下的字号大小是无效的

2、解决方法

1、在Chrome浏览器中调整字号最小值

优点:快,方便,

缺点:只对自己电脑上的Chrome浏览器生效。对别人电脑上的无效

2、使用CSS

使用css中的 **transform:scale(0.5)**对字体进行缩放

使用方法:比如需要得到10px的字体

1、先设置字体大小为20px

2、进行0.5倍缩放

html 复制代码
<!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>
      div {
        font-size: 20px;
        transform: scale(0.5);
      }
    </style>
  </head>
  <body>
    <div>1122</div>
  </body>
</html>

注意:

1、**transform: scale(0.5) 属性对行内元素无效!**需要转换为行内块元素或者块级元素

相关推荐
哀木12 小时前
一个简单的套壳方案,就能让你的 Agent 少做重复初始化
前端
问心无愧051313 小时前
ctf show web入门27
前端
小村儿13 小时前
给 AI Agent 装上"长期记忆":Karpathy 的 LLM Wiki 思想,我做成了工具
前端·后端·ai编程
竹林81813 小时前
用ethers.js连接MetaMask实现Web3钱包登录:从踩坑到稳定运行的完整记录
前端·javascript
heyCHEEMS13 小时前
如何用 Recast 实现静态配置文件源码级读写
前端·node.js
心连欣13 小时前
从零开始,学习所有指令!
前端·javascript·vue.js
review4454313 小时前
大模型和function calling分别是如何工作的
前端
东东同学13 小时前
耗时一个月,我把 Nuxt 首屏性能排障经验做成了一个 AI Skill
前端·agent
冴羽14 小时前
超越 Vibe Coding —— AI 辅助编程指南
前端·ai编程·vibecoding
梦想的颜色14 小时前
一天一个SKILL——前端最佳自动化测试 webapp-testing
前端·web app