设计稿尺寸设计rem换算，调整根目录fontSize。根据根节点的的fontSize，换算指定父元素的fontSize，在父元素下的子元素使用em并实现1em = 10px；vw em rem互相换算

一、rem - 根据设计稿计算页面px转换为rem，1rem = 10px

1-1、设计稿为375px ，设计rem的适配基础宽度，如果基础宽度设置为10px

1rem = 10px

100vw = 375px(设计稿尺寸)

那么设计根节点的font-size时计算公式：

375px = 100vw = 37.5rem
1rem = 100 / 37.5 ≈ 2.6vw

那么我们在根节点设置时就可以设置为font-size：2.6vw

在html中设置

/* Mobile */
@media screen and (max-width: 768px) {
    :root {
        /* 设计稿尺寸为375px的标准  1rem = 10px，100vw = 375px ----> 37.5rem = 375px = 100vw --- 1rem = 100vw/37.5 = 2.6vw */
        /*使用时直接10px = 1rem 转换即可 */
        font-size: 2.6vw;
    }
}


页面使用时在写css时可设计稿的尺寸转换为rem

如果设计稿的尺寸是375px的。元素的宽度是50px。那在写css时可以写成：width: 5rem

.className {
        /*使用时直接10px = 1rem 转换即可 */
        width: 5rem;
    }

1-2、如果UI稿是750px的。那设置的基础宽度10px

1rem = 10px
100vw = 750px（设计稿尺寸）
750px = 100vw = 75rem
那么: 1rem = 100vw / 75 = 1.3vw

那在html中设置的根节点的font-size: 1.3vw

/* Mobile */
@media screen and (max-width: 768px) {
    :root {
        /*使用时直接10px = 1rem 转换即可 */
        font-size: 1.3vw;
    }
}



页面使用时在写css时可设计稿的尺寸转换为rem

如果设计稿的尺寸是750px的。元素的宽度是50px。那在写css时可以写成：width: 5rem

@media screen and (max-width: 768px) {
    .className {
        /*使用时直接10px = 1rem 转换即可 */
        width: 5rem;
    }
}

二、em - 根据根节点的的font-size的大小，设置父元素下的font-size。使父节点下的子元素使用em，1em = 10px

        2-1、需要却分一下，在指定区间内根节点的font-size设置的标准是1rem = 10px还是16px或者其他尺寸。

注意父元素设置了fontszie之后，子元素使用em。父元素及其任何子元素字体不要再设置px！！！！！！

                2-1-1、 1rem = 16px（16px就是基础字体大小）

/* Pad 根据设计稿计算出来的尺寸时在当前区间内font-size: 0.97vw;以实现1rem = 16px*/
@media screen and (max-width: 1024px) and (min-width: 769px) {
    :root{
        font-size: 0.97vw;
    }
}。

计算公式：text{字体大小} = text{目标像素大小} ÷ {基础字体大小 } * 0.97 {根节点的换算基数}

注意：这样子元素没得关于设计px尺寸的，全部使用em设计。避免样式不小心设置font-size时样式污染。

//在1024-769px区间内，1em等于10px，而当前设置下，1rem等于16px，对应的根元素的字体大小为0.97vw。
//您想要确定在这个区间内，omt-picture-map 的字体大小应该是多少vw，以便使得1em等于10px。

// 由于1rem等于16px，而1rem又等于0.97vw，
// 我们可以计算出在1024-769px区间内时，omt-picture-map 的字体大小应该是多少vw：

公式：text{字体大小} = text{目标像素大小} ÷ div 16 * 0.97

text{字体大小} = 10px ÷ 16px * 0.97vw

text{字体大小} = 0.60625vw


所以在css中设置：

注意：这样子元素没得关于设计px尺寸的，全部使用em设计。避免样式不小心设置font-size时样式污染。注意父元素及其任何子元素字体不要设置px！！！！！！

/* Pad */
@media screen and (max-width: 1024px) and (min-width: 769px) {
      .common-revamp_em{
        font-size: 0.61vw;
      }
    .children {
    width:2.4em;/* 设计稿宽度是24px*/
/* 字体在区间内可以被转换成 18px。以为组外层的font-size的vw动态自适应的。所以字体也会是自适应的缩放。注意字体不要设置px！！！！！！*/
    font-size: 1.8em; /* 设计稿字体是18px*/
    }
}


/* html中添加common class name 即可*/
<div class="omt-picture-map common-revamp_em"><div class="children">children</div>

 2-1-2、1rem = 10px（10px就是基础字体大小）

设置根节点 /* PC  1rem = 10px*/
@media screen and (max-width: 1660px) and (min-width: 1025px) {
  :root {
    font-size: 0.6vw;
  }
}

公式：text{字体大小} = text{目标像素大小} ÷ 10 {基础字体大小}* 0.6{根节点换算基数}

text{字体大小} = 10px ÷ 10px * 0.6vw

text{字体大小} = 0.6vw


所以在css中设置：

注意：这样子元素没得关于设计px尺寸的，全部使用em设计。避免样式不小心设置font-size时样式污染。注意父元素及其任何子元素字体不要设置px！！！！！！

/* Pad */
@media screen and (max-width: 1660px) and (min-width: 1024px) {
      .common-revamp_em{
        font-size: 0.6vw;
      }
    .children {
    width:2.4em; /* 设计稿宽度是24px*/
/* 字体在区间内可以被转换成 18px。以为组外层的font-size的vw动态自适应的。所以字体也会是自适应的缩放。注意字体不要设置px！！！！！！*/
    font-size: 1.8em; /* 设计稿字体大小是18px*/
    }
}


/* html中添加common class name 即可*/
<div class="omt-picture-map common-revamp_em"><div class="children">children</div>