2018-7-9 周周
隨著時間的發(fā)展,現(xiàn)在基本上人手一部手機的低頭族。做為前端開發(fā)的程序猿,在開發(fā)移動端web應(yīng)用的時候,對面一堆各色尺寸不一樣的屏幕,就有點淡淡的憂傷。
以上是2018年二月份的友盟數(shù)據(jù),可在這里查看詳情
很明顯我們所要實現(xiàn)的就是在上述如此之多的屏幕,都能實現(xiàn)UI大大出的視覺圖上的效果。而要實現(xiàn)這樣的效果主要有兩個難點
各屏幕適配各屏幕的適配,有兩種方案,flexible + rem 與 vw。這三個單詞是什么意思,看著很眼熟,但是這兩個方案居然是什么呢,請允許我細細道來。
flexible + rem顯而易見,該方案是由rem 以及 flexible組成的。rem (font size of the root element)相對于根元素(即html元素)font-size計算值的倍數(shù),flexible 即 flexible.js, 手淘團隊提供的一個為該方案屏幕適配而寫的一個庫,主要實現(xiàn)的功能就是,根據(jù)屏幕的寬度給 html 元素設(shè)置一個合適的 font-size 值。
怎么樣看的不是很懂是吧。讓我來用一個頁面場景再復(fù)述一遍。
正常情況下,我們的UI大大會以iphone6的尺寸為標(biāo)準,做一套視覺效果圖,并在上面進行標(biāo)注,給到我們的標(biāo)注圖,如下所示
拿到這個圖 我們該如何下手呢
到這里為止是不是就結(jié)束了呢 ? 很遺憾的告訴你并不是。為什么 html 元素的 font-size 要設(shè)置為 37.5px呢?現(xiàn)在這個界面在iphone6上能完美顯示了,在iphone5s,iphone6p能完美顯示嗎?(iphone6, iphone6s, iphone7. iphone8屏幕沒有發(fā)生變化,本文直接用iphone6代替了。)上面的兩個問題 我們還有沒解決,這個時候就輪到flexible登場了。只需要像如下引入就可實現(xiàn)用js來自動根據(jù)屏幕寬度設(shè)置 html元素的font-size的值。
<script src=";引申一下在上述過程中,你會發(fā)現(xiàn),UI給到我們的一般是px標(biāo)注的圖,我們將其轉(zhuǎn)化為rem,這個過程其實會花費很大的計算時間。做為一個合格的程序員,我們應(yīng)該把這種機械性無腦的操作交給計算機來實現(xiàn)。我使用的是PostCss的插件 postcss-px2rem,這個插件能讓我們在寫代碼時候直接寫px,在構(gòu)建的時候自動將我們所寫的px轉(zhuǎn)換為rem,大大提升了我們的開發(fā)效率。
vw這個vw的方案,相當(dāng)而言還比較新。vw 即(viewport width)可視窗口的寬度。之所以把這個方案放在后面來說,是因為viewport在去年(2017年)的時候存在不少的兼容性問題,各個瀏覽器的支持并不是很好。但是來到了2018年這個時間點,viewport單位意見得到了眾多瀏覽器的支持(80.45%)。
可以在這里查看。
接下來就讓我們來正式了解下這個方案吧。vw既然是一個尺寸單位,那它的寬度等于多少呢?等于1%整個屏幕的寬度。舉個例子,再次以iphone6手機為例,100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到這里為止是不是就結(jié)束了呢? 是的就是這么簡單。
引申一下跟之前一樣的痛點,我們?nèi)匀恍枰ㄙM大量不必要的計算時間去把標(biāo)注圖中的px轉(zhuǎn)換為vw,有沒有類似于postcss-px2rem的工具呢?很榮幸能再次站在巨人的肩膀上,已經(jīng)有大神寫了了類似的PostCss插件 postcss-px-to-viewport
1px問題移動端的屏幕不僅僅分辨率有差異,其實還有Retina屏的問題。正常情況下,我們代碼里的1px在屏幕上就應(yīng)該顯示一個像素點,但是在Retina屏下則不僅僅是一個像素點。再次拿iphone6為例,其dpr(device pixel ratio)設(shè)備像素比為2,css中一個1x1的點,其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px,在iPhone6 Plus下甚至?xí)@示成3px。
這樣的話,我們就會發(fā)現(xiàn)在有些手機上1px明顯跟另外的一些手機的1px粗細不一樣。其實大多數(shù)的小公司不會扣這樣的一個細節(jié),比如說我們公司不會。(^__^) 嘻嘻……
但是作為一個有追求的前端工程師,我們應(yīng)該盡量的把事情做的完美一點,(ps.像大公司看齊,在大公司這個細節(jié)問題其實是不容忽視的,為了自己以后的發(fā)展前途,我們有必要把這個細節(jié)完善掉的。)
這個問題的解決方案有很多,個人覺得最簡單方面的還是大漠大大的一種解決方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}編譯出來就是
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='其他小程序中的屏幕適配最近在寫小程序,在小程序里,使用的是小程序的那套,跟平時用的vue全家桶以及react全家桶不一樣,并沒有配置webpack,在這種情況下我們使用postcss其實很困難(反正我是搞不出來/(ㄒoㄒ)/~~)
那該怎么辦呢,小程序提供了一個自己的單位, rpx(responsive pixel): 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
設(shè)備
iPhone5
iPhone6
iPhone6p
我們直接用拿到iphone6的標(biāo)注圖,直接寫rpx就好。
藍藍設(shè)計的小編 http://tweetduck.com