移动端文字适配

Posted 2020-09-22 廖振廷

移动端普遍使用rem进行适配，但是文字不合适使用rem。很多浏览器自带点阵字体，当碰到font-size:13px,font-size:15px时会有很多问题。因此一般建议使用px。根据不同的dpr进行font-size大小的调整

/*安卓低清设备*/
div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; 
}
/*iPhone4到iPhone6s,部分安卓*/
[data-dpr="2"] div {
    font-size: 24px;
}
/*iPhone6 plus,iPhone6s plus，部分安卓*/
[data-dpr="3"] div {
    font-size: 36px;
}
/*部分安卓比如三星Note4*/
[data-dpr="4"] div {
    font-size: 48px;
}