html前端 rem佈局,完美相容各手機端的尺寸,自適應佈局
阿新 • • 發佈:2018-12-23
用法說明:
我這裡用的scss,當然沒用這些樣式前處理器也沒關係,下面會讓你怎麼做,因此需定義轉換函式
$w: 75; //psd 設計圖尺寸除以10
@function rem($n) {
@return ($n/$w) + rem;
}
$w 說明:
1.該為設計圖頁面總寬度尺寸除以10
3. 接著用法:
.main{
width: rem(700); //某個main類的寬度在設計圖是700px。
font-size: rem(28); //我這裡為了偷懶,直接用rem去寫。但值得注意的是
//所有關於字型的行高line-height, font-size 都需要在設計圖原有的尺寸+4.
//譬如 字型在設計圖是24px,而用rem去轉換時,需要 24+4也就是 rem(28)
//為何+4?因為放手機大小,具體+多少,自己來定,但是+4是最合理,因為和設計圖的字畫素一毛一樣
}
4. 完蛋,我是新手,沒用scss,sass等前處理器怎麼辦??
給個建議,先去學下scss語法,非常簡單,類似搬磚工作。
如果這個網址打不開,自己搜下翻譯工具吧
把scss程式碼貼上這個網站左邊框,右邊就會編譯成css的程式碼咯