html
在html使用了网上阿里的函数来计算根元素的字体(当然可以写在其他地方，只要生效就可以)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>xxx</title>
<base href="./">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<app-root></app-root>
<!--调试插件-->
<!--<script src="http://mtestzhanqi.artqiyi.com/views/common/libs/vconsole.min.js "></script>-->
<script>
/*
* 根据屏幕宽度改变根元素字体
*/
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = window.screen.width / 10 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
这里主要使用了函数计算根元素字体，将屏幕分成了10分，在iphone6下面根元素字体就是37.5px；
less函数
这是使用了less的unit函数来添加单位，将所有的需要转化的css都写到一个公共的less文件里面，通过@import导入进去。(这里只是粘贴了一部分)
.fs(@px) {
font-size: unit(@px / 37.5, rem);
}
/*----- 宽度 -----*/
.w(@px) {
width: unit(@px / 37.5, rem);
}
/*----- 高度 -----*/
.h(@px) {
height: unit(@px / 37.5, rem);
}
/*----- 行高 -----*/
.lh(@px) {
line-height: unit(@px / 37.5, rem);
}
/*----- 背景尺寸 -----*/
.b_s(@px, @px) {
-webkit-background-size: unit(@px / 37.5, rem) unit(@px / 37.5, rem);
background-size: unit(@px / 37.5, rem) unit(@px / 37.5, rem);
}
/**
* [背景尺寸，设置宽度，高度auto]
*/
.b_s1(@px) {
-webkit-background-size: unit(@px / 37.5, rem) auto;
background-size: unit(@px / 37.5, rem) auto;
}
.b_s2(@px) {
-webkit-background-size: auto unit(@px / 37.5, rem);
background-size: auto unit(@px / 37.5, rem);
}
/*----- margin -----*/
.mt(@px) {
margin-top: unit(@px / 37.5, rem);
}
.mr(@px) {
margin-right: unit(@px / 37.5, rem);
}
.mb(@px) {
margin-bottom: unit(@px / 37.5, rem);
}
.ml(@px) {
margin-left: unit(@px / 37.5, rem);
}
将iphone6的屏幕分成10分，所以就除了37.5，用unit函数来添加单位（这里是相对iphone6的屏幕的，相信大部分公司移动端的设计图都是根据iphone6设计的）。
在其他less文件里面使用
@import "../less/bass.less";
.sort-title {
.fs(17);
color: @color0;
font-family: PingFang-SC-Medium;
.mt(20);
.mb(15);
}
.fs, .mt这些就是less的函数，最终编译好的文件就是rem了。（总之，在iphon6或者iphone7，屏幕是376px，无论你上面怎么分配比例，在chrome里面审查你编译后的css，鼠标放到元素上会显示大小，这时和你设计图上的大小相等就可以。）
总结
本人感觉这样还是比较方便的，不用像那样设置根元素100px，然后根据sublime的插件来计算，或者更复杂的计算等等。我们项目使用angular4，angular4可以自动编译less,只需向上面那样直接调用函数就可以，而且可以做一些运算，还是比较方便的，当然vue里面你只要安装less插件，就可以让vue-cli来编译了，如果这些你都没用，你还可以通过Koala来编译成css，通过link来引入。
