H5-這篇告訴你什么是好的適配方案

這篇將告訴大家什么是好的移動(dòng)H5適配方案。

一、rem的不足

首先，我們還是從rem講起，上一篇我們總結(jié)了在H5項(xiàng)目中如何正確使用rem（H5-如何在項(xiàng)目中正確應(yīng)用rem），然而大家可能會(huì)認(rèn)為rem就是好的移動(dòng)H5適配方案，其實(shí)不然，rem有兩個(gè)明顯的不足之處。其表現(xiàn)在：

1、單位轉(zhuǎn)換計(jì)算比較麻煩。

2、單純的rem沒有解決高度適配的問(wèn)題。

然而，第一個(gè)問(wèn)題，可以通過(guò)工具來(lái)解決，在前面的文章中我們提到過(guò)一個(gè)工具“px-rem轉(zhuǎn)換器”。在制作一個(gè)H5的時(shí)候，完全可以按照設(shè)計(jì)稿的px值來(lái)寫css，然后通過(guò)工具轉(zhuǎn)換成rem單位。

在我們上篇總結(jié)rem的應(yīng)用的時(shí)候，用的媒體查詢方法，其就是通過(guò)改變寬度來(lái)確定字號(hào)的。然而當(dāng)高度變化時(shí)，頁(yè)面中的所有rem設(shè)置的字體值大小是不變的。也就是說(shuō)沒有做高度適配。（有時(shí)我們希望在一屏中顯示完所有的內(nèi)容）。

二、好的適配方案

原理：載入頁(yè)面時(shí)，用JS讀取窗口寬高，對(duì)比跟原始設(shè)計(jì)稿尺寸的差距（設(shè)計(jì)稿可能是750*1334，通過(guò)PS獲取字體大?。?，判斷是寬度差的多些呢，還是高度差的多些，然后選擇那個(gè)較小的比例，縮小主體內(nèi)容。這個(gè)方法跟使用scale縮放整個(gè)屏幕元素效果是一樣的。

我們假定，設(shè)計(jì)稿的大小是750*1334，展示的效果是這樣的：（這個(gè)尺寸是設(shè)計(jì)稿顯示出來(lái)的大?。?/p>

從上圖我們可以看出，我用一個(gè)P元素，font-size:1.5rem；在設(shè)計(jì)稿中取了一個(gè)基準(zhǔn)大小32px（可以是最小的字體）。1.5*32=48px。

然而，按上面的那個(gè)原理方案，我們的適配代碼是這樣寫的：

說(shuō)明：

1、其中baseWidth和baseHeiht是設(shè)計(jì)稿寬高尺寸，因?yàn)樵O(shè)計(jì)稿才是我們最終的依據(jù)，目的是為了保持和設(shè)計(jì)稿一樣。

2、baseFontSize是750設(shè)計(jì)稿下html的基準(zhǔn)fontsize，newSize是寬高適配后的html的基準(zhǔn)font-size。

3、innerWidth 算滾動(dòng)條的寬度表示窗口空間，clientWidth 在任何窗口系統(tǒng)中指用戶內(nèi)容能放置的空間 不算滾動(dòng)條的寬度。

4、按照當(dāng)前屏幕寬高比跟設(shè)計(jì)稿寬高比較小的值作為縮放比例。

第四句是什么意思了，下面我特意做了一個(gè)gif圖來(lái)解釋一下它的意思：

這個(gè)gif的右側(cè)有兩個(gè)值（window.innerWidth/baseWidth和window.innerHeight/basHeight），屏幕的寬高相對(duì)于設(shè)計(jì)稿的寬高，取一個(gè)變化小的作為整體放大倍數(shù)。

注意觀察：當(dāng)高度的變化值小于寬度的變化值是，改變高度，頁(yè)面中元素的大小也是自應(yīng)用變化的。

三、寫在最后的總結(jié)：

rem是用來(lái)處理元素font-size的，涉及到元素的width和height的適配問(wèn)題可以使用百分比來(lái)解決，（當(dāng)然，這個(gè)百分比也是需要根據(jù)設(shè)計(jì)稿的定的），以上通過(guò)rem來(lái)（寬高）適配字體大小，用百分比來(lái)處理寬高大小就是好的移動(dòng)H5適配方案的選擇。

本文標(biāo)題：H5-這篇告訴你什么是好的適配方案
文章源于：http://www.bm7419.com/news0/217400.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站、云服務(wù)器、全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)