1.使用rem的前提是要提前设置好页面的根节点的大小：(两种选择任意一种即可)
(1).在body中设置font-size:16px
(2).
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/16 + "px";
})()
</script>
2.设置好根节点的大小之后，在css文件中可以直接设置rem值，结合koala编译工具，这样的话生成的页面会随着窗口大小而自适应
(1).安装koala，如果没有安装的童鞋请点击安装地址：http://koala-app.com/index-zh.html
(2).新建css文件夹，把less文件放入文件夹中，打开安装好的koala，将整个css文件夹拖入koala中，less文件自动编译出.css文件
点击less文件，右侧自动合并的选项，点击Compile
3.最最重要的一步来了，编辑器里面打开.less文件，如果设计稿的宽度是640的话，那么1rem=40px，如果设计稿是750的话,1rem=75px，以设计稿宽度为750px的话，这样less中就可以直接写：750/@r
————————————————
版权声明：本文为CSDN博主「Gemini仔仔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39680839/article/details/83341908
==================================================================
前提：
1、使用rem的前提是首先要设置好页面的根节点的大小：
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/16 + "px";
})()
</script>
2、设置好根节点大小后，在css文件中直接设置rem值，这样页面中的布局就会随着窗口的大小而自适应。但是我们自己去计算rem值会很麻烦，所以出现了less编译工具考拉。
3、新建文件夹，将less和css文件同时放在这个文件夹，在less文件中如下声明，如果设计稿是640px的宽度，那么1rem相当于40px。这样就可以直接按照设计稿的px值来写:640px写成640/@r，：
考拉使用方法：
1、 安装完考拉后，打开考拉，会看到这个页面：
2、 然后将less和css文件同时拖到这里（注意less和css文件必须放在同一文件夹下）：
3、 点击less文件，右侧自动合并的选项，点击Compile：
4、 css文件也重复上一步的操作。
5、 然后在编辑器里面看less和css文件，在less里面直接按照设计稿上的值设置宽高，就能自动将这个值编译到css文件里面的rem值了：
PS:由于兼容问题，rem只适合于移动端开发，而且rem值很小的时候，尽量使用px值，上次出现一种情况就是，本来1px的边框，换算成rem后变成0.0003这种很小的数字，导致在小屏手机比如320的iphone5s上边框消失，所以还是视具体情况而定到底使用rem还是px吧~
==============================================
1.使用rem的前提是要提前设置好页面的根节点的大小：(两种选择任意一种即可)
(1).在body中设置font-size:16px
(2).
script"><script>
(function(){
var style="color:rgb(73 238 255)">html = style="color:rgb(98 189 255)">document.style="color:rgb(98 189 255)">documentElement;
var hWidth = style="color:rgb(73 238 255)">html.getBoundingClientRect().width;
style="color:rgb(73 238 255)">html.style.fontSize = hWidth/16 + "px";
})()
</script>2.设置好根节点的大小之后，在css文件中可以直接设置rem值，结合koala编译工具，这样的话生成的页面会随着窗口大小而自适应
(1).安装koala，如果没有安装的童鞋请点击安装地址：http://koala-app.com/index-zh.html
(2).新建css文件夹，把less文件放入文件夹中，打开安装好的koala，将整个css文件夹拖入koala中，less文件自动编译出.css文件
点击less文件，右侧自动合并的选项，点击Compile
3.最最重要的一步来了，编辑器里面打开.less文件，如果设计稿的宽度是640的话，那么1rem=40px，如果设计稿是750的话,1rem=75px，以设计稿宽度为750pz的话，这样less中就可以直接写：750/@r
大功告成，大家如果对scss编译输出css并转换成rem感兴趣的话，请戳这里：https://mp.csdn.net/postedit/83148296
标签：文件,考拉,koala,less,html,rem,css From： https://www.cnblogs.com/2019gdiceboy/p/16856406.html