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

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

之前發過一篇文章《移動端應該如何動態設定字型大小?》,主要說了移動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的部分匹配。

移動端頁面布局

上下兩條固定到上邊和下邊,中間的內容區域佔據剩餘的空間 all html,body,container 第一種方法 1 header高度固定畫素,footer固定畫素。section高度calc 100 header高度 footer高度 2 header,footer設定絕對定位的方式 absol...

移動端頁面布局

關於移動端頁面的總結,最近接觸移動端頁面,簡單的介紹幾種頁面布局吧,以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比,縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作,使用em 相對度量單位 實現文字的處理。但...

Web頁面該如何布局

幾乎所有的web開發人員都使用html編輯過網頁,也知道htm元素具體是什麼效果,儘管如此,但是很多時候,開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後,就會受這些頁面效果的影響失去考慮頁面結構的能力。我們很多...