常用 css rem 根字体

 计算公式:

 写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度

 因此： 写入CSS的尺寸 = UI图标注的尺寸/UI图宽度*屏幕宽度

 

 比如:当标注尺寸为64px、UI图宽度为1440px时，针对不同屏幕宽度，写入CSS的属性分别为：

 屏幕宽度320px：font-size: 64/1440*320 = 14.22px

 屏幕宽度360px：font-size: 64/1440*360 = 16px

 屏幕宽度375px：font-size: 64/1440*375 = 16.67px

 屏幕宽度1440px：font-size: 64/1440*1440 = 64px

 于是媒体查询就如下:

@media (min-width: 320px) {
    html {
        font-size: 14.22px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 16.67px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 64px;
    }
}

 

常用的rem +媒体查询如下

根据设计图尺寸进行换算

@media (min-width:320px){
  html{
    font-size: 14.2222px;
  }
}
@media (min-width:360px){
  html{
    font-size: 16px;
  }
}
@media (min-width:375px){
  html{
    font-size: 16.6667px;
  }
}
@media (min-width:412px){
  html{
    font-size: 18.2857px;
  }
}
@media (min-width:480px){
  html{
    font-size: 21.3333px;
  }
}
@media (min-width:640px){
  html{
    font-size: 28.4444px;
  }
}
@media (min-width:720px){
  html{
    font-size: 32px;
  }
}
@media (min-width:768px){
  html{
    font-size: 34.1333px;
  }
}
@media (min-width:1440px){
  html{
    font-size: 64px;
  }
}