在学习 text-size-adjst之前我们先思考一个问题、我们有几种方式可以去修改font-size的大小，有什么方式可以放我们整个页面内容变大？

通过定义css设置字体大小或者写入style

  1. .text {
  2.   font-size: 12px;
  3. }
  5. <div style="font-size:12px;">文字大小</div>

通过继承父类size大小

  1. <div class="parent">
  2.   <div class="text">
  3.     内容
  4.   </div>
  5. </div>
  7. <style>
  8.     .parent {
  9.         font-size: 30px;
  10.     }
  11. </style>

通过设置根（html)）节点font-size值去动态计算其他rem值、下面就代表1rem = 100px

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div class="text">
  13.         内容
  14.     </div>
  15.     <button id="btn">设置html的font-size</button>
  16. </body>
  18. </html>
  20. <style>
  21.     .text {
  22.         font-size: 1rem;
  23.     }
  24. </style>
  26. <script>
  27.     const btn = document.getElementById('btn');
  28.     btn.onclick = function () {
  29.         document.documentElement.style.fontSize = '100px';
  30.     }
  31. </script>

通过transform:scale对文本进行放大

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div class="box">
  12.         <div class="text">
  13.             内容
  14.         </div>
  15.     </div>
  16. </body>
  18. </html>
  20. <style>
  21.     .box {
  22.         display: flex;
  23.         width: 100vw;
  24.         height: 100vh;
  25.         justify-content: center;
  26.         align-items: center;
  27.     }
  29.     .text {
  30.         font-size: 12px;
  31.         transform: scale(5);
  32.     }
  33. </style>

通过设置text-size-adjust（高版本chrome不支持、建议跑在微信webview里）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div class="text">
  13.         内容
  14.     </div>
  16. </body>
  18. </html>
  20. <style>
  21.     body,
  22.     html {
  23.         -webkit-text-size-adjust: 300% !important;
  24.     }
  25.     .text {
  26.         font-size: 15px;
  27.     }
  28. </style>

上面的方式都可以去改变font-size大小、那我们如何去实现一个页面的内容统一的放大呢！rem可以动态的改变html的size大小是能够实现的、但是如果你作为一个微信这样的产品所打开的网页可不一定都是使用的rem布局、所以rem貌似不是最优的选择、所以我们需要去了解微信打卡h5后通过三个点开打一个工具栏里面有一个调整字体功能、我们一起来看看微信是怎么实现的！ 直接先揭开谜底 微信也是通过给body设置text-size-adjust的百分比去做字体内容的放大缩小

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. <meta name="viewport"
  10. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no">
  11. <meta name="screen-orientation" content="portrait">
  12. <meta name="apple-mobile-web-app-capable" content="yes">
  13. <meta name="format-detection" content="telephone=no">
  14. <meta name="full-screen" content="yes">
  15. <title>Document</title>
  16. </head>
  18. <body>
  19. <div class="text">
  20. 内容
  21. </div>
  23. <button id="btn">查看body的text-adjust</button>
  24. </body>
  26. </html>
  28. <style>
  29. .text {
  30.   font-size: 12px;
  31. }
  32. </style>
  34. <script>
  35. document.getElementById('btn').onclick = function () {
  36.   const v = window.getComputedStyle(document.body, null).getPropertyValue('-webkit-text-size-adjust');
  37.   alert(v)
  38.   console.log('text-size-adjust', window.getComputedStyle(document.body, null).getPropertyValue('-webkit-text-size-adjust'))
  39. }
  40. </script>

当我们通过微信去设置文本内容后我们获取下微信给我们body设置值、会发现随着字体的变大text-size-adjust的百分比也会变大、所以得出设备上的文字大小计算中text-size-adjust会参与进去