外掛程式描述：hotcss不是乙個庫，也不是乙個框架。它是乙個移動端布局開發解決方案。使用hotcss可以讓移動端布局開發更容易。讓移動端布局開發更加容易
hotcss不是乙個庫，也不是乙個框架。它是乙個移動端布局開發解決方案。使用hotcss可以讓移動端布局開發更容易。
使用動態的html根字型大小和動態的viewport scale。
遵循視覺一致性原則。在不同大小的螢幕和不同的裝置畫素密度下，讓你的頁面看起來是一樣的。
不僅便捷了你的布局，同時它使用起來異常簡單。可能你會說 talk is cheap,show me the code，那我現在列下hotcss整個專案的目錄結構。
├── example //所有的示例都在這個目錄下保證不同裝置下的統一視覺體驗。│ ├── duang
│ ├── normal
│ └── wolf
│└── src //主要檔案在這裡
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl
不需要你再手動設定viewport，根據當前環境計算出最適合的viewport。
支援任意尺寸的設計圖，不侷限於特定尺寸的設計圖。
支援單一專案，多種設計圖尺寸，專為解決大型，長週期專案。
提供px2rem轉換方法，css布局，零成本轉換，原始值不丟失。
有效解決移動端真實1畫素問題。
引入hotcss.js
如果可以，你應將hotcss.js的內容以內嵌的方式寫到標籤裡面進行載入，並且保證在其他js檔案之前。
為了避免不必要的bug，請將css放到該js之前載入。
css要怎麼寫
你可能已經注意到在src/目錄下有px2rem.scss/px2rem.less/px2rem.styl三個檔案。沒錯，這就是hotcss提供的將px轉為rem的方法，可根據您的需要選擇使用。
推薦使用scss來編寫css，在scss檔案的頭部使用import將px2rem匯入
@import '/path/to/px2rem.scss';@function px2rem( $px )
$designwidth : 750; //如設計圖是750
@import '/path/to/px2rem.scss';
$designwidth : 750; //如設計圖是750
注意：如果使用less，則需要引入less-plugin-functions，普通的less編譯工具無法正常編譯。
想用px怎麼辦？
直接寫px肯定是不能適配的，那hotcss.js會在html上註冊data-dpr屬性，這個屬性用來標識當前環境dpr值。那麼要使用px可以這麼寫。
//scss寫法
#container
[data-dpr="3"] &
}
可以通過強制設定dpr。來關閉響應的viewport scale。使得viewport scale始終為固定值。
通過設定該值來優化平板/pc訪問體驗，注意該值預設值為540。設定為0則該功能關閉。 為了配合使用該設定，請給body增加樣式width:16rem;margin:0 auto;。
通過對design-width的設定可以在本頁執行的js中直接使用hotcss.px2rem/hotcss.rem2px方法，無需再傳遞第二個值。
用於重新計算布局，一般不需要你手動呼叫。
hotcss.mresize();觸發mresize的時候會執行該方法。hotcss.callback
hotcss.callback = function()單位轉換hotcss.px2rem/hotcss.rem2px
hotcss.px2rem 和 hotcss.rem2px。你可以預先設定hotcss.designwidth可以在meta中設定design-width，則之後使用這兩個方法不需要再傳遞第二個引數。
迭代後仍然支援在js中設定hotcss.designwidth，推薦使用meta去設定。
/**
* [px2rem px值轉換為rem值]
* @param px [需要轉換的值]
* @param designwidth [設計圖的寬度尺寸]
* @return [返回轉換後的結果]
*/hotcss.px2rem( px , designwidth );
/*** 同上。
* 注意：因為rem可能為小數，轉換後的px值有可能不是整數，需要自己手動處理。
*/hotcss.rem2px( rem , designwidth );
//你可以在meta中定義design-width，此後使用px2rem/rem2px，就不需要傳遞designwidth值了。同時也支援舊的設定方式，直接在js中設定hotcss.designwidth
hotcss.px2rem(200);
hotcss.rem2px(350);
**：移動端布局解決方案
flex布局 rem 百分比 px 畫素 絕對單位 pixel pix picture el element 影象元素 百分比 相對單位 相對於父級元素 rem 相對單位 root 根元素 相對於根元素字型大小的倍數 em 相對單位 相對于父元素字型大小的倍數 vh view height 檢視高 ...
移動端布局適配解決方案
以下這段 是用於根據移動端裝置的螢幕解析度計算出合適的根元素的大小 當裝置寬度為375 iphone6 時，根元素font size 100px 依次增大 限制當為裝置寬度大於768 ipad 之後，font size不再繼續增大 scale 為meta viewport中的縮放大小 設定根元素fo...
移動端布局解決方案 神器
godcss 移動端布局終極解決方案 神器 讓移動端布局開發更加容易 http www.github.com godcss 第一部分 example 所有的示例都在這個目錄下 duang normal wolf src 主要檔案在這裡 godcss.js px2rem.less px2rem.scs...