二十一、vm 适配

目录:
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>Documenttitle>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 6.4vw;
      height: 4.66vw;
      background-color: #bfa;
    }
  style>
head>
<body>
  
  

  <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>Documenttitle>
  <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 - 观察实际计算的样式值)

二十一、vm 适配_第1张图片 二十一、vm 适配_第2张图片

- 解答:
看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;
    }

你可能感兴趣的:(html+css,vm适配,rem)