移动端适配之rem

      现在手机业务的逐渐发展，移动端的业务原来越多，但是我们的手机品牌有很多，同一个牌子又有很多不同的型号，比如iphone就有从iphone-iphoneX多种型号，每种不同型号的手机屏幕大小也不尽相同，很多时候要做适配。

     总结一下目前个人用的几种适配方式：

     1.js+less

      首先在页面的头部加上这么一段js代码：

<script>

    var pixRatio = 1/window.devicePixelRatio;

    var html = document.documentElement;

     document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixRatio +',minimum-         scale='+ pixRatio +',maximum-scale='+ pixRatio +'">');

      html.style.fontSize = html.clientWidth/25 + 'px';

</script>

       然后在less中定义一个常量：@rem:30rem;

       这里的rem的值得来源：通常目前设计师给的设计稿大多都是iPhone的，在设计稿上iphone6的物理像素是375px，在头部的就是中有一段代码是：html.style.fontSize = html.clientWidth/25 + 'px';   那么这里的rem=375/25=30rem。

       当我们在设计稿上量出高度是90px时，那么在代码中这个高度就是90/30rem，在less中可以这么写：height:88/@rem;

2.直接使用css控制，

在reset.css中设置html的font-size:50px;

在iphone的设计稿上我们量出是80物理像素，那么我们转化到代码中实际应该是40px;但是可以用一个简单的办法：html的font-size是50px，相当于设计稿里的100px,所以当我们量出设计稿是高度80物理像素时，我们可以直接在代码中写.8rem；实际上也就是80/100rem。

最后欢迎关注我的公众号，在这里我们聊的不止代码，还有人生，另外我还放置可平时个人觉得比较有用的一切前端资料在公众号，欢迎共享！