移动端rem适配

网上很多都说会pc网页开发，也就会了mobile网页开发。那么实际呢也是如此，但是对于新手来说却摸不着头脑无从下手，一直纠结于适配的问题，那么这里就来展示下rem适配。

展示rem适配代码

 

 //rem适配
 (function () {
        var  styleN = document.createElement("style");
        var width = document.documentElement.clientWidth/16;
        styleN.innerHTML = 'html{font-size:'+width+'px!important}';
        document.head.appendChild(styleN);
    })();

• 这什么意思呢？就是把手机屏幕分成16份，每份设置为font-size，就是每份代表1rem。
• 那我们要怎么用呢？直接在代码中引入普通js一样就可以了。

• 那写css的时候要怎么写呢？写css的时候根据设计师给的图 宽度/16 就是1rem了，这又是什么意思呢？可以这么理解：

   

  

  举个栗子.jpg

如果设计师给的图是750px;那么1rem就是750/16=46.875px；也就是1rem代表46.875px；那如果在css中要写

 

.box{
  width:60px;
}

要怎么写呢？这么写

 

.box{
  width:1.28rem;
}

呃呃，这个1.28怎么来的？60px/46.875px*1rem = 1.28rem就是这么来的。
晓得没呢，那这样是不是每一个px转rem都要这么算呢？
没错，就是都要这么算，那是不是很麻烦呢，哈哈，不要着急，这个时候呢就有了less编译等
这里就以less编译举个例子：
index.less

 

@rem:46.875rem;
body{
    width: 60/@rem;
}

编译后
index.css

 

body {
  width: 1.28rem;
}

嗯嗯，那怎么编译呢？
嗯，编译有很多中办法，可以借助不同的工具：用Hbuilder开发的话可以参考https://blog.csdn.net/butterfly5211314/article/details/72597738
当然还有更简单的命令行编译参考less编译方法
https://blog.csdn.net/sun_dongliang/article/details/82750773

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。

作者：前端来入坑
链接：https://www.jianshu.com/p/f44a97223dee
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。