移動端頁面佈局及字型大小該如何設定

2022-08-05 14:21:21 字數 2514 閱讀 5186

之前發過一篇文章《移動端應該如何動態設定字型大小?》,主要說了移動web端佈局的一些解決方法,本文再一次把這個問題提出來,並分別對安卓和ios裝置的螢幕瞭解做出自己的分享,在進入正文之前最好先了解:物理畫素邏輯畫素dprrem

那麼進入正文,不廢話,直接把自己瞭解到的和一些看法說出來。

首先是螢幕問題,現在主流的移動裝置以安卓和ios為主,我們在製作移動端頁面也是以相容這兩種裝置去佈局。

首先說iphone,不得不說iphone的螢幕考慮到了我們開發者的難處,從而給出iphone螢幕的dpr都是整數值,在6plus出現之前,iphone的dpr始終是2(物理畫素/邏輯畫素=2),即使是6plus出現了,iphone到底其實也就只有2,3這兩個dpr。其實6plus的實際dpr並不是整數,而是2.87左右,不過,為了方便開發者來開發,iphone6plus對其做了一個調整,將dpr調整為3,然後在對螢幕進行了一個縮放。所以我們很容易對其做到兼顧。

而安卓的dpr值,並不像iphone那樣就只有兩個值。安卓的dpr是千奇百怪的,可能是1.5,2,3,4,2.5等等的都有。(甚至我還看到了1.7之類的,安卓的各個裝置商,玩的真尼瑪high啊。怎麼高興怎麼來。)

那麼現在開始說說移動端怎麼佈局以及字型該怎麼設定,因為有各種各樣的解決方式,我就不一一贅述,直接說手淘的解決方案:flexible.js

我為什麼又一次把這個拿出來說,主要有兩點原因:1.我覺得它好用,解決方式簡單粗暴。2.它經過了比較長時間的考驗,如今手淘還在用它。

具體的使用方法自己可以去flexible.js看看,這裡我簡單說說它的方案以及個人對它的改良。

我們ui在製作移動端頁面時,主流的寬度有640、750或者還有其他尺寸,這裡我們用640做為例子,那麼手淘的做法就是將640的寬度分為10份,每份是64,那麼1個rem=64px,也就是說此時html,比如設計稿中有個元素寬64px,高128px,那麼這個div的寬用rem表示就是:64(設計稿元素的寬)/64(1rem為64px)=該元素計算出的rem值,同理高度從px換成rem就是128/64=2rem樣式就是div。然後再配上flexible.js的**段:

function refreshrem()

var rem = width / 10;//看到了嗎 看到了嗎 這句話 分成10份哦

docel.style.fontsize = rem + 'px';

flexible.rem = win.rem = rem;

}

對於佈局,我們可以使用rem去結局,那麼字型呢?

大家知道,現在pc端主流的字型大小都是類似12px、14px、16px,幾乎沒有13、15、17這樣的數字出現,至於為什麼,請進穿越門瞭解。如果我們用rem做為字型單位,那麼轉成px的時候,勢必會出現奇數或者小數的情況,為了避免這種情況,我們還是要用px做為字型的單位。那麼又如何用px去當作字型大小呢?

首先看這段**:

div 

[data-dpr="2"] div

[data-dpr="3"] div

沒有錯,手淘的解決方案就是預設寫個dpr為1時的字型大小,然後根據不同dpr下的值去匹配不同的字型大小。

flexible會獲取裝置的dpr值,然後在html標籤上自定義data-dpr屬性,並放入dpr值,後面的font-size就是動態設定一個rem單位的大小。

其實我覺得這種方案挺噁心的,每個牽扯到字型的大小就必須多些幾套去相容,但這也算是個方案。

最後就是對flexible.js的看法,話不多說上**:

if (!dpr && !scale)  else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else 

} else

scale = 1 / dpr;

}

可以看出,flexible中動態設定dpr時,只對iphone進行了處理,完全沒有把安卓放在眼裡,那安卓怎麼辦?這裡我又想吐槽安卓那些廠商,真尼瑪瞎搞,dpr設定成各種非主流數值,玩死我們這些碼農了,連flexible都不想管了。吐槽到此為止,那麼該怎麼改良它,讓它能對安卓手機也能動態設定dpr呢?我們將這段**改一下:

if (!dpr && !scale)  else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else 

} else

scale = 1 / dpr;

}

我們對這裡做了一點點修改,即來判斷dpr是否是規則的,也就是是否是我們常見的1,2,3等,然後,我們只對規則的dpr,來進行一個字型的處理。這樣,iphone依然還是用之前的匹配方案。而其實目前安卓,很多的裝置還是比較常見的dpr了,所以我們這裡,將之前對裝置的判斷,轉變成對dpr是否是整數的一個判斷。其他地方不變,可以解決對安卓dpr的部分匹配。