二十一、vm 适配

news2024/11/28 20:44:23

目录：
1. 基础准备
2. 详解

一、基础准备

目的：前面我们通过0.1333vm x 对应的设计图像素，找到vm值，这个方法不准确，且操作复杂，有没有什么优化方法呢？
解决：vw的适配（在js不参与的情况下，用vw是最好的适配手段）

<!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;
    }
    .box1{
      width: 6.4vw;
      height: 4.66vw;
      background-color: #bfa;
    }
  </style>
</head>
<body>
  
  <!-- 
  
    现在还是创建一个48 x 35 图标，在手机网页上

    目标：弄一个简单的换算方法成vw

   
  -->

  <div class="box1"></div>

</body>
</html>

二、详解

练习：现在还是创建一个48px x 35px 图标，在手机网页上,现在要用一个简单的换算方法成vw。

注意要用到如下知识：
1 em = 1个字体大小
1 rem = 1 html的字体大小（1个html的font-size）

1.实现：

<!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;
    }
     /* html字体大小 */
     html{
       font-size: 100px; 
    }
    .box1{
      /* 此时这里的1rem = 100px; 3rem = 3 * 100 = 300px */
      width: 3rem; 
      height: 4.66vw;
      background-color: #bfa;
    }
   
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

2.按照上面分析，如果我们把换成前面提过的1px = 0.333333vw。


     /* html字体大小 */
     html{
      /* 这个对应表示1个像素  1px = 0.13333333vw */
      font-size: 0.13333333vw;
    }
    .box1{
      /* 此时这里的1rem = 1个0.13333333vw,  */
      width: 48rem;
      height: 35rem;
      background-color: #bfa;
    }

3.按照推断，好像应该是没问题，但是发现不对，没有正常按照预期显示？
- 调试：
写了style后，看真实生效的样式要看computed,调试会常用到，调试面板的 styles 只能看代码去设置的样式。（选中html - computed - 观察实际计算的样式值）

- 解答：
看computed，发现我们设置了font-size:0.133333, 但是实际计算出来的却是12px。所以才导致没有满足我们的预期。

   /* html字体大小 */
     html{
      /*
       之所以没有按照预期显示是因为，网页中字体大小最小是12px, 
       不能设置一个比12像素还小的字体。如果我们设置了一个小鱼12px的字体，则字体自动设置为12
      */
      font-size: 0.13333333vw;
    }
    .box1{


      /* 此时这里就是48 * 12， 完全超过了375，所以出了滚动条 */
      width: 48rem;
      height: 35rem;
      background-color: #bfa;
    }

- 解决方式：
因为html 里面设置的font-size不够，那么我们就扩大font-size, 10倍，40倍…这样扩大，通过看computed 如果正常显示了我们写的font-size，就表示当前定义的font-size正确。

确定倍数后，如这里的40倍，即1rem = 40px，后面再在设计图中测出元素的width,height后除以 40，就得到rem值了

   /* html字体大小 */
     html{
      /*
      以前是0.13333333vw = 1px
      我现在扩大十倍, 但是发现computed 算出来的font-size还是12px ,说明设置的1.3333333vw还是小了
      1.3333333vw = 10px

      扩大40倍 - 0.13333333 * 40 = 5.3333vw
      5.3333vw = 40px  
      */
      font-size: 5.3333vw;
    }
    .box1{


      /* 此时这里1rem = 40px(设计图)， 对应的反酸width, height , 48/40 = 1.2rem   35/40 = 0.875rem */
      width: 1.2rem;
      height: 0.875rem;
      background-color: #bfa;
    }