移动端文字适配

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

使用淘宝的适配的rem插件之后，安卓和苹果的设备 html标签会被打上不同的data-dpr。

苹果

安卓

 

我们用CSS3的属性选择器，根据dpr的不同来编写css进行适配。

/*安卓*/
html[data-dpr="1"] .header{
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; 
}
/*iPhone*/
html[data-dpr="2"] .header {
    font-size: 24px;
}