適配各種尺寸的設(shè)備的實(shí)現(xiàn)

我們會(huì)第一個(gè)想到的可能是，頁(yè)面內(nèi)所有塊級(jí)元素的寬度，高度，邊距值(margin,padding)都用百分?jǐn)?shù)唄。
在水平方向，寬度，水平方向的間距值如果為百分?jǐn)?shù)的值，其值是相對(duì)于其父元素的寬度來(lái)計(jì)算的，可以實(shí)現(xiàn)水平方向適配不同尺寸的設(shè)備。
在垂直方向，高度值如果為百分?jǐn)?shù)，其值是相對(duì)于父元素的高度來(lái)計(jì)算的。但垂直方向的間距值如果為百分?jǐn)?shù)的話，其值是相對(duì)與父元素寬度（而非高度）來(lái)計(jì)算的，呵呵（無(wú)奈~~~）。

因此，水平方向我們可以用百分?jǐn)?shù)的方案來(lái)做適配。垂直方向需要其他方案。

我們能不能用 CSS3 的 Media Queries 呢？做不到。雖然 Media Queries 支持對(duì)設(shè)備高度的查詢，但我們不可能列舉所有設(shè)備的高度，為每種不同高度的設(shè)備寫(xiě)一套 CSS 吧。如果只需兼容幾種高度的設(shè)備，可以考慮這個(gè)方案。

下面介紹幾個(gè)解決方案。

用 JS 來(lái)實(shí)現(xiàn)

原理是，在元素上設(shè)置高度用 data-style-height 屬性，其值為在父元素高度中占的份數(shù)。頁(yè)面初始化時(shí)，JS 會(huì)根據(jù)該值，父元素的高度，父元素的高度的總份數(shù)，給該元素的高度賦值。如

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

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

同樣的，設(shè)置間距用這些屬性： data-style-margin-top, data-style-margin-bottom, data-style-padding-top, data-style-padding-bottom。頁(yè)面初始化時(shí)，JS 會(huì)根據(jù)屬性值給元素的對(duì)應(yīng)的間距賦值。

具體實(shí)現(xiàn)代碼見(jiàn)這里。

用 flex 實(shí)現(xiàn)

原理和用 JS 實(shí)現(xiàn)基本一致。用 flex 實(shí)現(xiàn)只是用 flex-grow 的值大于 0 的 flex 元素在父空間很大時(shí)，會(huì)自動(dòng)變大的特性來(lái)代替 JS 的計(jì)算。

具體的原理是，在元素上設(shè)置高度用 data-style-height 屬性，其父元素設(shè)置樣式 display:flex;flex-direction: column;。頁(yè)面初始化時(shí)，JS 會(huì)根據(jù)該值給該元素設(shè)置 flex-grow:屬性值。間距用帶 data-style-height 屬性并且元素內(nèi)容為空的元素來(lái)實(shí)現(xiàn)。

具體實(shí)現(xiàn)代碼見(jiàn)這里。

用圖片實(shí)現(xiàn)

如果內(nèi)容不需要交互，可以將整個(gè)頁(yè)面做成一張圖片來(lái)實(shí)現(xiàn)。當(dāng)然，這樣做后期維護(hù)會(huì)比較坑爹。

HTML:

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

CSS:

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com