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

Janvem發表於2017-12-05
CSSJS

簡介

  • 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);
}
複製程式碼

相關文章