在移动端字体大小相同

移动端怎么用rem

假设设计师的视觉稿是按照iPhone6的宽度来设计的，即375px
那么，我们可以完全按照视觉稿上的尺寸来赋值给元素的样式，比如视觉稿上的尺寸是80px，那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。

当所有的网站所有的页面样式都设置好之后。

1. 设置页面的rem大小
```css

html {
font-size: calc(100vw/3.75);
}
或者（ipone6举例）

html{

font-size:26.67vw;
}
```
100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px

2. 替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的80px，就是0.8rem
这样在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5中，因为设备的宽度变小了，100vw/3.75得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。

这样就可以做到针对任何分辨率的设备保持视觉一致了。
最后，前面用到vw单位，但是低版本的设备可能不支持，那么就需要js来处理一下：
```javascript

font-size根据屏幕的宽度变化而变化

    fn();
    function fn () {
        var w = window.innerWidth /3.75;
        var html = document.querySelector("html");
        html.style.fontSize = w +"px";
    }
    window.onresize = fn;

```

当然，rem也可以用在定宽高等
————————————————
版权声明：本文为CSDN博主「bingyuewheel」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bingyuewheel/article/details/53312044