移动rem项目在pc端字体显示问题

在移动端使用rem写好的项目，在pc端显示，只要使用rem字体的文字，图片都会出现问题

 

 

正常的移动端  👇：

 

 

 

字体变大的pc端  👇： 

 

因为rem是根据 根字体大小 (html的字体大小) 来设置的，所以到pc端和移动端 html的font-size大小不同，导致展示有问题

 

 

解决办法 ： 

// 最大的容器 设置了 max-width : 527px;
// 当屏幕大小为527时 ， html的font-size为52.7
// 所以使用媒体查询 ， 限制html的font-size在大于527的时候 ， 字体大小为固定的52.7px
@media screen and (min-width:527px) {
  html {
    font-size: 52.7px !important;
  }
}

 

使用媒体查询 ， 限制html的font-size后 ， pc显示正常