上一章節(jié)講完了用js實(shí)現(xiàn)rem的布局，但是當(dāng)寫頁面時(shí)每次都要去計(jì)算rem的值是不是很不方便呢？下面介紹一下不使用計(jì)算器就可以計(jì)算出rem的值是如何實(shí)現(xiàn)的。

首先我們需要新建一個(gè)less文件，說到less先解釋一下什么是less。

Less中文網(wǎng)給出的解釋是：Less是一門CSS預(yù)處理語言，它擴(kuò)展了CSS語言，增加了變量、Mixin、函數(shù)等特性，使CSS更易維護(hù)和擴(kuò)展。

less中有一個(gè)很好用的功能，這里就拿rem這個(gè)例子來說明一下。新建一個(gè)less文件，注意less文件要在你的css文件夾中，把你寫的樣式全部剪切到less文件中，這里是不需要改數(shù)值單位的，即設(shè)計(jì)圖量出來的數(shù)值是多少就寫多少，因?yàn)閘ess文件會(huì)幫你轉(zhuǎn)換成rem的數(shù)值。前提是要給他定一個(gè)數(shù)值，就是上篇說到的一個(gè)像素等于多少rem，這里我用的是750px的設(shè)計(jì)圖，除以15，得出的是50rem。

@r:50rem;
a,
input,
button{
	-webkit-tap-highlight-color:rgba(0,0,0,0); /*清除按下時(shí)的陰影*/
}
input,
button{
	-webkit-appearance:none; /*清除iOS下自帶的圓角*/
	border-radius: 0;
}
body{ 
	margin: 0;
	-webkit-user-select:none; /*禁止選中文字*/
}
body * {
	-webkit-user-select:none;
	font-family: Helvetica; /*所有移動(dòng)端下都支持的一種字體*/
}
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文件中需要變得就是，頭部加上一個(gè) @r:50rem 后，所有的數(shù)值都除以@r就可以了，即上述代碼。當(dāng)然還要借助一個(gè)小工具，名為koala的一個(gè)處理工具。你需要下載安裝，打開后把你的整個(gè)css文件放上，雙擊less.less，會(huì)彈出圖2的左側(cè)欄，點(diǎn)擊compile就可以了。

回到你的文件夾中，會(huì)多出一個(gè)less.css的文件，這里面就是處理好的以rem單位的數(shù)值。并且會(huì)自動(dòng)給你排版。（即下面代碼）

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*清除按下時(shí)的陰影*/
}
input,
button {
  -webkit-appearance: none;
  /*清除iOS下自帶的圓角*/
  border-radius: 0;
}
body {
  margin: 0;
  -webkit-user-select: none;
  /*禁止選中文字*/
}
body * {
  -webkit-user-select: none;
  font-family: Helvetica;
  /*所有移動(dòng)端下都支持的一種字體*/
}
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;
}

可以動(dòng)手試一試。