上一章節(jié)講完了用js實現(xiàn)rem的布局，但是當寫頁面時每次都要去計算rem的值是不是很不方便呢？下面介紹一下不使用計算器就可以計算出rem的值是如何實現(xiàn)的。
首先我們需要新建一個less文件，說到less先解釋一下什么是less。
Less中文網(wǎng)給出的解釋是：Less是一門CSS預(yù)處理語言，它擴展了CSS語言，增加了變量、Mixin、函數(shù)等特性，使CSS更易維護和擴展。
less中有一個很好用的功能，這里就拿rem這個例子來說明一下。新建一個less文件，注意less文件要在你的css文件夾中，把你寫的樣式全部剪切到less文件中，這里是不需要改數(shù)值單位的，即設(shè)計圖量出來的數(shù)值是多少就寫多少，因為less文件會幫你轉(zhuǎn)換成rem的數(shù)值。前提是要給他定一個數(shù)值，就是上篇說到的一個像素等于多少rem，這里我用的是750px的設(shè)計圖，除以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 后，所有的數(shù)值都除以@r就可以了，即上述代碼。當然還要借助一個小工具，名為koala的一個處理工具。你需要下載安裝，打開后把你的整個css文件放上，雙擊less.less，會彈出圖2的左側(cè)欄，點擊compile就可以了。
回到你的文件夾中，會多出一個less.css的文件，這里面就是處理好的以rem單位的數(shù)值。并且會自動給你排版。（即下面代碼）
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;
}可以動手試一試。
