移動端布局解決方案 神器

godcss

移動端布局終極解決方案+神器--- 讓移動端布局開發更加容易 http:/www.github.com/godcss/

第一部分

├──example //所有的示例都在這個目錄下│├──duang │├──normal │└──wolf │└──src //主要檔案在這裡├──godcss.js ├──px2rem.less ├──px2rem.scss └──px2rem.styl ├──demo //參照的flex布局案例│├──css.css │├──demo.html __ data-god.css __ god.css

如果可以，你應將godcss.js的內容以內嵌的方式寫到標籤裡面進行載入，並且保證在其他js檔案之前。

為了避免不必要的bug，請將css放到該js之前載入。

css要怎麼寫

你可能已經注意到在src/目錄下有px2rem.scss/px2rem.less/px2rem.styl三個檔案。沒錯，這就是godcss提供的將px轉為rem的方法，可根據您的需要選擇使用。

推薦使用scss來編寫css，在scss檔案的頭部使用import將px2rem匯入

@import'/path/to/px2rem.scss';

@functionpx2rem($px )$designwidth :750;//如設計圖是750

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

注意：如果使用less，則需要引入less-plugin-functions，普通的less編譯工具無法正常編譯。

想用px怎麼辦？

直接寫px肯定是不能適配的，那godcss.js會在html上註冊data-dpr屬性，這個屬性用來標識當前環境dpr值。那麼要使用px可以這麼寫。

//scss寫法#container[data-dpr="3"]&}

可以通過強制設定dpr。來關閉響應的viewport scale。使得viewport scale始終為固定值。

name="godcss"content="initial-dpr=1">

通過設定該值來優化平板/pc訪問體驗，注意該值預設值為540。設定為0則該功能關閉。

為了配合使用該設定，請給body增加樣式width:16rem;margin:0 auto;。

name="godcss"content="max-width=640">

通過對design-width的設定可以在本頁執行的js中直接使用godcss.px2rem/godcss.rem2px方法，無需再傳遞第二個值。

name="godcss"content="design-width=750">

用於重新計算布局，一般不需要你手動呼叫。

godcss.mresize();

觸發mresize的時候會執行該方法。

godcss.callback =function()

godcss.px2rem和godcss.rem2px。你可以預先設定godcss.designwidth可以在meta中設定design-width，則之後使用這兩個方法不需要再傳遞第二個引數。

迭代後仍然支援在js中設定godcss.designwidth，推薦使用meta去設定。

/**

* [px2rem px值轉換為rem值]
* @param   px          [需要轉換的值]
* @param   designwidth [設計圖的寬度尺寸]
* @return              [返回轉換後的結果]
*/godcss.px2rem(px ,designwidth );/** * 同上。 * 注意：因為rem可能為小數，轉換後的px值有可能不是整數，需要自己手動處理。 */godcss.rem2px(rem ,designwidth );//你可以在meta中定義design-width，此後使用px2rem/rem2px，就不需要傳遞designwidth值了。同時也支援舊的設定方式，直接在js中設定godcss.designwidthgodcss.px2rem(200);godcss.rem2px(350);

簡潔的api，熟悉的屬性值，入門毫無壓力。在html中採用屬性的方式布，將布局和css進行分離，清晰的布局結構讓你更容易維護，可以在不更改css的情況下更改布局。特別是在react中使用data-flex屬性布局，維護起來更加的方便。

flex布局分為舊版本dispaly:box;，過渡版本dispaly:flexbox;，以及現在的標準版本display:flex;android2.3開始就支援舊版本display:-webkit-box;4.4開始支援標準版本display:flex;ios 6.1開始支援舊版本display:-webkit-box;7.1開始支援標準版本display:flex;pc 如果你不需要相容ie10以下版本，也是可以使用flex.css flex.css同時能相容新版本和舊版本，保證了瀏覽器不支援新版本時，回退到舊版本。

flex="main:center cross:center"style="width:500px;height:500px;background:#108423">style="background:#fff">看看我是不是居中的

data-flex="main:center cross:center"style="width:500px;height:500px;background:#f1d722">style="background:#fff">看看我是不是居中的

dir：主軸方向top：從上到下right：從右到左bottom：從上到下left：從左到右（預設）

main：主軸對齊方式right：從右到左left：從左到右（預設）justify：兩端對齊center：居中對齊

cross：交叉軸對齊方式top：從上到下bottom：從上到下baseline：跟隨內容高度對齊center：居中對齊stretch：高度併排鋪滿（預設）

box：子元素設定mean：子元素平分空間first：第乙個子元素不要多餘空間，其他子元素平分多餘空間last：最後乙個子元素不要多餘空間，其他子元素平分多餘空間justify：兩端第乙個元素不要多餘空間，其他子元素平分多餘空間

取值範圍(0-10)，單獨設定子元素多餘空間的如何分配，設定為0，則子元素不占用多餘的多餘空間多餘空間分配=當前flex-box值/子元素的flex-box值相加之和

深圳html5開發者社群：170761660nodejs前端分享群：133240225

				
移動端布局解決方案 神器
godcss 移動端布局終極解決方案 神器 讓移動端布局開發更加容易 http www.github.com godcss 第一部分 example 所有的示例都在這個目錄下 duang normal wolf src 主要檔案在這裡 godcss.js px2rem.less px2rem.scs...
				
移動端布局解決方案
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...