適配各種尺寸的裝置的實現

有時候我們會有讓內容恰好佔一屏，並且適配各種尺寸的裝置的需求。我們先不談這樣做會導致在一些裝置上的顯示不盡人意，直接談如何?。

我們會第一個想到的可能是，頁面內所有區塊層級元素的寬度，高度，邊距值(margin,padding)都用百分數唄。
在水平方向，寬度，水平方向的間距值如果為百分數的值，其值是相對於其父元素的寬度來計算的，可以實現水平方向適配不同尺寸的裝置。
在垂直方向，高度值如果為百分數，其值是相對於父元素的高度來計算的。但垂直方向的間距值如果為百分數的話，其值是相對與父元素寬度（而非高度）來計算的，呵呵（無奈~~~）。

因此，水平方向我們可以用百分數的方案來做適配。垂直方向需要其他方案。

我們能不能用 CSS3 的 Media Queries 呢？做不到。雖然 Media Queries 支援對裝置高度的查詢，但我們不可能列舉所有裝置的高度，為每種不同高度的裝置寫一套 CSS 吧。如果只需相容幾種高度的裝置，可以考慮這個方案。

下面介紹幾個解決方案。

用 JS 來實現

原理是，在元素上設定高度用 data-style-height 屬性，其值為在父元素高度中占的份數。頁面初始化時，JS 會根據該值，父元素的高度，父元素的高度的總份數，給該元素的高度賦值。如

<p>  <p id="a" data-style-height="1"></p>  <p id="b" data-style-height="2"></p></p>

在上面代碼中，父元素的高度的總份數為 3，a 的高度占 1 份，b 的高度 占 2 份。假設父元素的高度是 100px， 那麼 a 的高度為 (1 / 3 * 100)px，b 的高度為 (2 / 3 * 100)px。

同樣的，設定間距用這些屬性： data-style-margin-top, data-style-margin-bottom, data-style-padding-top, data-style-padding-bottom。頁面初始化時，JS 會根據屬性值給元素的對應的間距賦值。

具體實現代碼見這裡。

用 flex 實現

原理和用 JS 實現基本一致。用 flex 實現只是用 flex-grow 的值大於 0 的 flex 元素在父空間很大時，會自動變大的特性來代替 JS 的計算。

具體的原理是，在元素上設定高度用 data-style-height 屬性，其父元素設定樣式 display:flex;flex-direction: column;。頁面初始化時，JS 會根據該值給該元素設定 flex-grow:屬性值。間距用帶 data-style-height 屬性並且元素內容為空白的元素來實現。

具體實現代碼見這裡。

用圖片實現

如果內容不需要互動，可以將整個頁面做成一張圖片來實現。當然，這樣做後期維護會比較坑爹。

HTML:

<img class="fullpage" src="...">

CSS:

html,body{  height: 100%;}.fullpage{  width: 100%;  height: 100%;}