在移动端使用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显示正常