hotcss.js------移動端佈局優秀的解決方案

簡介

• hotcss不是一個庫，也不是一個框架。它是一個移動端佈局開發解決方案。使用hotcss能夠讓移動端佈局開發更容易。

• 使用動態的HTML根字體大小和動態的viewport scale。

• 遵循視覺一致性原則。在不一樣大小的屏幕和不一樣的設備像素密度下，讓你的頁面看起來是同樣的。

• 不只便捷了你的佈局，同時它使用起來異常簡單。可能你會說 talk is cheap,show me the code，那我如今列下hotcss整個項目的目錄結構。

文件目錄

src	//主要文件在這裏
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl
複製代碼

基本用法

<script src="/path/to/hotcss.js"></script>
複製代碼

scss中使用

@import './px2rem.scss';
$designWidth : 750; //如設計圖是750

#header{
    width: px2rem(640);
    height: px2rem(88);
    line-height: px2rem(88);
    background-color: #33aa33;
    text-align: center;
    font-size: px2rem(48);
    color: rgba(255,255,255,1);
}
複製代碼

less中使用

*注意：若是使用less，則須要引入less-plugin-functions，普通的less編譯工具沒法正常編譯。*
@import './px2rem.less';
$designWidth : 750; //如設計圖是750

#header{
    width: px2rem(640);
    height: px2rem(88);
    line-height: px2rem(88);
    background-color: #33aa33;
    text-align: center;
    font-size: px2rem(48);
    color: rgba(255,255,255,1);
}
複製代碼