1. 程式人生 > >關於Html5移動端適配不同解析度的佈局總結

關於Html5移動端適配不同解析度的佈局總結

關於現在比較流行的一些框架比如bootstrap,用得多的人會發現bootstrap確實在做扁平化風格的網站方面,提供了很大的便利,適配不同解析度的pc端,包括能適配到移動端。但是就我個人而言,從pc端適配到移動端這種一整套的方式還是有所不妥的,畢竟pc端顯示的內容相對於移動端來說是很多很繁瑣的,而移動端顯示的風格大多以扁平化為主,螢幕顯示的內容也不宜過多過於繁瑣,所以要想直接從pc端適配到移動端的這一整套流程下來,只適用於一些內容不多的扁平化小網站。

好了進入主題,今天主要說說html是怎麼適配不同解析度的手機的,bootstrap雖然適配了整個螢幕的大小,但是你會發現,無論在哪個解析度底下,字型的大小都是不會變的,沒有做到不同的分線率顯示不同的字型大小,這會造成一個問題,比如說在iPhone6的螢幕解析度下,可以正常顯示一段文字,但是在iphone5的螢幕解析度比較小,那麼那段文字顯示就會出現異常,這種情況在開發的過程中經常會出現。

那麼怎麼讓文字適配不同解析度呢,不多說直接上程式碼:

@media screen and (min-width: 320px) {html{font-size:17.06666px;}}
@media screen and (min-width: 360px) {html{font-size:19.2px;}}
@media screen and (min-width: 375px) {html{font-size:20px;}}
@media screen and (min-width: 400px) {html{font-size:21.33333px;}}
@media screen and (min-width: 414px) {html{font-size:22.08px;}}
@media screen and (min-width: 440px) {html{font-size:23.46666px;}}
@media screen and (min-width: 480px) {html{font-size:25.6px;}}
@media screen and (min-width: 520px) {html{font-size:27.73333px;}}
@media screen and (min-width: 560px) {html{font-size:29.86666px;}}
@media screen and (min-width: 600px) {html{font-size:32px;}}
@media screen and (min-width: 640px) {html{font-size:34.13333px;}}
@media screen and (min-width: 680px) {html{font-size:36.26666px;}}
@media screen and (min-width: 720px) {html{font-size:38.4px;}}
@media screen and (min-width: 750px) {html{font-size:40px;}}
@media screen and (min-width: 760px) {html{font-size:40px;}}
@media screen and (min-width: 800px) {html{font-size:40px;}}
@media screen and (min-width: 960px) {html{font-size:40px;}}

以上是我自己總結的一段適配移動端的程式碼,安卓最大解析度是750,那麼我也以750為分界點,來設定專案的根字型大小。

那要怎麼應用呢,主要是在單位的應用上,這裡推薦使用rem,對rem不熟的朋友可以先去了解一下,如下給一個佈局的例子,

比如在iphon6的解析度為375,那麼

.p{font-size:1rem}

此時在iphone6螢幕上顯示的字型大小就是1*20 = 20,也就是20px大小,而750的解析度下的字型大小就是1*40 = 40,也就是40px大小,所以在佈局的時候會涉及到px與rem兩種單位間的換算問題,這裡推薦一個線上小工具http://alurk.com/,這個可以一次性將px全部轉為換rem,http://pxtoem.com/

這個可以一個一個的轉換,看具體需求了。

當然,還有其他方式的適配程式碼,之前在微信公眾號上看過一篇文章講的就是適配移動端的,說得很不錯,感興趣的朋友可以去看看,會收穫更多,這裡分享地址點選開啟連結