適配各種尺寸的設備的實現

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

我們會第一個想到的可能是，頁面內所有區塊級元素的寬度，高度，邊距值(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 屬性，其父元素設定樣式<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;。頁面初始化時，JS 會根據該值給該元素設定 flex-grow:屬性值。間距用帶有 data-style-height 屬性並且元素內容為空的元素來實現。

具體實作程式碼請看這裡。

用圖片實現

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

HTML:

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

CSS:

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

---

#

以上是適配各種尺寸的設備的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！