移动端如何使用js来实现rem单位的布局（二）

上一章节讲完了用js实现rem的布局，但是当写页面时每次都要去计算rem的值是不是很不方便呢？下面介绍一下不使用计算器就可以计算出rem的值是如何实现的。

首先我们需要新建一个less文件，说到less先解释一下什么是less。

Less中文网给出的解释是：Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。

less中有一个很好用的功能，这里就拿rem这个例子来说明一下。新建一个less文件，注意less文件要在你的css文件夹中，把你写的样式全部剪切到less文件中，这里是不需要改数值单位的，即设计图量出来的数值是多少就写多少，因为less文件会帮你转换成rem的数值。前提是要给他定一个数值，就是上篇说到的一个像素等于多少rem，这里我用的是750px的设计图，除以15，得出的是50rem。

@r:50rem;
a,
input,
button{
	-webkit-tap-highlight-color:rgba(0,0,0,0); /*清除按下时的阴影*/
}
input,
button{
	-webkit-appearance:none; /*清除iOS下自带的圆角*/
	border-radius: 0;
}
body{ 
	margin: 0;
	-webkit-user-select:none; /*禁止选中文字*/
}
body * {
	-webkit-user-select:none;
	font-family: Helvetica; /*所有移动端下都支持的一种字体*/
}
body{
	-webkit-text-size-adjust:100%;	/*禁止横竖切换字体的改变*/
}
a{ text-decoration: none;}
#header{height: 96/@r; line-height: 96/@r; background: #F00;}
#header i{font-size: 45/@r; color: #FFF;}
#back{ width:99/@r; height: 96/@r;}
#header input{ width: 522/@r; height: 64/@r; border: none; background: #eef2f3; border-radius: 34/@r;}

less文件中需要变得就是，头部加上一个 @r:50rem 后，所有的数值都除以@r就可以了，即上述代码。当然还要借助一个小工具，名为koala的一个处理工具。你需要下载安装，打开后把你的整个css文件放上，双击less.less，会弹出图2的左侧栏，点击compile就可以了。

回到你的文件夹中，会多出一个less.css的文件，这里面就是处理好的以rem单位的数值。并且会自动给你排版。（即下面代码）

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*清除按下时的阴影*/
}
input,
button {
  -webkit-appearance: none;
  /*清除iOS下自带的圆角*/
  border-radius: 0;
}
body {
  margin: 0;
  -webkit-user-select: none;
  /*禁止选中文字*/
}
body * {
  -webkit-user-select: none;
  font-family: Helvetica;
  /*所有移动端下都支持的一种字体*/
}
body {
  -webkit-text-size-adjust: 100%;
  /*禁止横竖切换字体的改变*/
}
a {
  text-decoration: none;
}
#header {
  height: 1.92rem;
  line-height: 1.92rem;
  background: #F00;
}
#header i {
  font-size: 0.9rem;
  color: #FFF;
}
#back {
  width: 1.98rem;
  height: 1.92rem;
}
#header input {
  width: 10.44rem;
  height: 1.28rem;
  border: none;
  background: #eef2f3;
  border-radius: 0.68rem;
}

可以动手试一试。