鼎之道、易于行

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

時間:2018-09-21 來源:鼎易科技 瀏覽:1780

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


2a3600053cceb0b8a471.jpg


一、rem的不足

首先,我們還是從rem講起,上一篇我們總結了在H5項目中如何正確使用rem(H5-如何在項目中正確應用rem),然而大家可能會認為rem就是最好的移動H5適配方案,其實不然,rem有兩個明顯的不足之處。其表現在:

1、單位轉換計算比較麻煩。

2、單純的rem沒有解決高度適配的問題。

然而,第一個問題,可以通過工具來解決,在前面的文章中我們提到過一個工具“px-rem轉換器”。在制作一個H5的時候,完全可以按照設計稿的px值來寫css,然后通過工具轉換成rem單位。

在我們上篇總結rem的應用的時候,用的媒體查詢方法,其就是通過改變寬度來確定字號的。然而當高度變化時,頁面中的所有rem設置的字體值大小是不變的。也就是說沒有做高度適配。(有時我們希望在一屏中顯示完所有的內容)。


二、最佳的適配方案

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

我們假定,設計稿的大小是750*1334,展示的效果是這樣的:(這個尺寸是設計稿顯示出來的大?。?/p>


28960004d75c7ee382d6.jpg


從上圖我們可以看出,我用一個P元素,font-size:1.5rem;在設計稿中取了一個基準大小32px(可以是最小的字體)。1.5*32=48px。

然而,按上面的那個原理方案,我們的適配代碼是這樣寫的:


2a3c0001d98e778ac947.jpg

說明:

1、其中baseWidth和baseHeiht是設計稿寬高尺寸,因為設計稿才是我們最終的依據,目的是為了保持和設計稿一樣。

2、baseFontSize是750設計稿下html的基準fontsize,newSize是寬高適配后的html的基準font-size。

3、innerWidth 算滾動條的寬度表示窗口空間,clientWidth 在任何窗口系統中指用戶內容能放置的空間 不算滾動條的寬度。

4、按照當前屏幕寬高比跟設計稿寬高比較小的值作為縮放比例。

第四句是什么意思了,下面我特意做了一個gif圖來解釋一下它的意思:


28960004d79e710cda73.gif

這個gif的右側有兩個值(window.innerWidth/baseWidth和window.innerHeight/basHeight),屏幕的寬高相對于設計稿的寬高,取一個變化小的作為整體放大倍數。

注意觀察:當高度的變化值小于寬度的變化值是,改變高度,頁面中元素的大小也是自應用變化的。


三、寫在最后的總結:

rem是用來處理元素font-size的,涉及到元素的width和height的適配問題可以使用百分比來解決,(當然,這個百分比也是需要根據設計稿的定的),以上通過rem來(寬高)適配字體大小,用百分比來處理寬高大小就是最佳的移動H5適配方案的選擇。

聯系我們

把你的需求告訴我們,讓我們的團隊為您服務!

咨詢熱線

400-905-7771

在線咨詢 QQ咨詢

两根粗大黑肉来回进出-免费人成在线观看视频播放-女人在床被男人狂躁-欧美人与禽交zozo