超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

移動(dòng)端適配問(wèn)題解決方案

2018-7-9    周周

隨著時(shí)間的發(fā)展,現(xiàn)在基本上人手一部手機(jī)的低頭族。做為前端開(kāi)發(fā)的程序猿,在開(kāi)發(fā)移動(dòng)端web應(yīng)用的時(shí)候,對(duì)面一堆各色尺寸不一樣的屏幕,就有點(diǎn)淡淡的憂傷。

QQ截圖20180705114651.png

QQ截圖20180705114755.png

以上是2018年二月份的友盟數(shù)據(jù),可在這里查看詳情
很明顯我們所要實(shí)現(xiàn)的就是在上述如此之多的屏幕,都能實(shí)現(xiàn)UI大大出的視覺(jué)圖上的效果。而要實(shí)現(xiàn)這樣的效果主要有兩個(gè)難點(diǎn)

  • 各屏幕適配
  • Retina屏下的細(xì)節(jié)處理(主要是1px的問(wèn)題)

各屏幕適配各屏幕的適配,有兩種方案,flexible + rem 與 vw。這三個(gè)單詞是什么意思,看著很眼熟,但是這兩個(gè)方案居然是什么呢,請(qǐng)?jiān)试S我細(xì)細(xì)道來(lái)。

flexible + rem顯而易見(jiàn),該方案是由rem 以及 flexible組成的。rem (font size of the root element)相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù),flexible 即 flexible.js, 手淘團(tuán)隊(duì)提供的一個(gè)為該方案屏幕適配而寫(xiě)的一個(gè)庫(kù),主要實(shí)現(xiàn)的功能就是,根據(jù)屏幕的寬度給 html 元素設(shè)置一個(gè)合適的 font-size 值。

怎么樣看的不是很懂是吧。讓我來(lái)用一個(gè)頁(yè)面場(chǎng)景再?gòu)?fù)述一遍。

正常情況下,我們的UI大大會(huì)以iphone6的尺寸為標(biāo)準(zhǔn),做一套視覺(jué)效果圖,并在上面進(jìn)行標(biāo)注,給到我們的標(biāo)注圖,如下所示

QQ截圖20180705115007.png

拿到這個(gè)圖 我們?cè)撊绾蜗率帜?/span>

  • 先設(shè)置 html 元素的 font-size, 這個(gè)值我們暫時(shí)設(shè)置為 font-size: 37.5px,即1rem = 37.5px;
  • 以iphone6為例子,其屏幕寬度為 750px, 整個(gè)屏幕的寬度即 20rem = 37.5 * 20px = 750px;
  • 此時(shí)手機(jī)號(hào)的輸入框?yàn)?490px = 13.06777777rem
  • 依次將頁(yè)面上的px轉(zhuǎn)換為rem,這樣我們就得到了全是rem為尺寸單位的頁(yè)面

到這里為止是不是就結(jié)束了呢 ? 很遺憾的告訴你并不是。為什么 html 元素的 font-size 要設(shè)置為 37.5px呢?現(xiàn)在這個(gè)界面在iphone6上能完美顯示了,在iphone5s,iphone6p能完美顯示嗎?(iphone6, iphone6s, iphone7. iphone8屏幕沒(méi)有發(fā)生變化,本文直接用iphone6代替了。)上面的兩個(gè)問(wèn)題 我們還有沒(méi)解決,這個(gè)時(shí)候就輪到flexible登場(chǎng)了。只需要像如下引入就可實(shí)現(xiàn)用js來(lái)自動(dòng)根據(jù)屏幕寬度設(shè)置 html元素的font-size的值。

<script src=";引申一下在上述過(guò)程中,你會(huì)發(fā)現(xiàn),UI給到我們的一般是px標(biāo)注的圖,我們將其轉(zhuǎn)化為rem,這個(gè)過(guò)程其實(shí)會(huì)花費(fèi)很大的計(jì)算時(shí)間。做為一個(gè)合格的程序員,我們應(yīng)該把這種機(jī)械性無(wú)腦的操作交給計(jì)算機(jī)來(lái)實(shí)現(xiàn)。我使用的是PostCss的插件 postcss-px2rem,這個(gè)插件能讓我們?cè)趯?xiě)代碼時(shí)候直接寫(xiě)px,在構(gòu)建的時(shí)候自動(dòng)將我們所寫(xiě)的px轉(zhuǎn)換為rem,大大提升了我們的開(kāi)發(fā)效率。

vw這個(gè)vw的方案,相當(dāng)而言還比較新。vw 即(viewport width)可視窗口的寬度。之所以把這個(gè)方案放在后面來(lái)說(shuō),是因?yàn)関iewport在去年(2017年)的時(shí)候存在不少的兼容性問(wèn)題,各個(gè)瀏覽器的支持并不是很好。但是來(lái)到了2018年這個(gè)時(shí)間點(diǎn),viewport單位意見(jiàn)得到了眾多瀏覽器的支持(80.45%)。


QQ截圖20180705115133.png

可以在這里查看。
接下來(lái)就讓我們來(lái)正式了解下這個(gè)方案吧。vw既然是一個(gè)尺寸單位,那它的寬度等于多少呢?等于1%整個(gè)屏幕的寬度。舉個(gè)例子,再次以iphone6手機(jī)為例,100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范

QQ截圖20180705115007.png


  • 根據(jù)定義,我們了解了在iphone6手機(jī)上 1vw = 7.5px
  • 此時(shí)手機(jī)號(hào)的輸入框?yàn)?490px = 65.333333vw
  • 依次將頁(yè)面上的px轉(zhuǎn)換為vw,這樣我們就得到了全是vw為尺寸單位的頁(yè)面

到這里為止是不是就結(jié)束了呢? 是的就是這么簡(jiǎn)單。

引申一下跟之前一樣的痛點(diǎn),我們?nèi)匀恍枰ㄙM(fèi)大量不必要的計(jì)算時(shí)間去把標(biāo)注圖中的px轉(zhuǎn)換為vw,有沒(méi)有類似于postcss-px2rem的工具呢?很榮幸能再次站在巨人的肩膀上,已經(jīng)有大神寫(xiě)了了類似的PostCss插件 postcss-px-to-viewport

1px問(wèn)題移動(dòng)端的屏幕不僅僅分辨率有差異,其實(shí)還有Retina屏的問(wèn)題。正常情況下,我們代碼里的1px在屏幕上就應(yīng)該顯示一個(gè)像素點(diǎn),但是在Retina屏下則不僅僅是一個(gè)像素點(diǎn)。再次拿iphone6為例,其dpr(device pixel ratio)設(shè)備像素比為2,css中一個(gè)1x1的點(diǎn),其實(shí)在iphone6上是2x2的點(diǎn),并且1px的邊框在devicePixelRatio = 2的Retina屏下會(huì)顯示成2px,在iPhone6 Plus下甚至?xí)@示成3px。

這樣的話,我們就會(huì)發(fā)現(xiàn)在有些手機(jī)上1px明顯跟另外的一些手機(jī)的1px粗細(xì)不一樣。其實(shí)大多數(shù)的小公司不會(huì)扣這樣的一個(gè)細(xì)節(jié),比如說(shuō)我們公司不會(huì)。(^__^) 嘻嘻……

但是作為一個(gè)有追求的前端工程師,我們應(yīng)該盡量的把事情做的完美一點(diǎn),(ps.像大公司看齊,在大公司這個(gè)細(xì)節(jié)問(wèn)題其實(shí)是不容忽視的,為了自己以后的發(fā)展前途,我們有必要把這個(gè)細(xì)節(jié)完善掉的。)

這個(gè)問(wèn)題的解決方案有很多,個(gè)人覺(jué)得最簡(jiǎn)單方面的還是大漠大大的一種解決方案。使用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;}編譯出來(lái)就是

.example {  border: 1px solid transparent;  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='其他小程序中的屏幕適配最近在寫(xiě)小程序,在小程序里,使用的是小程序的那套,跟平時(shí)用的vue全家桶以及react全家桶不一樣,并沒(méi)有配置webpack,在這種情況下我們使用postcss其實(shí)很困難(反正我是搞不出來(lái)/(ㄒoㄒ)/~~)

那該怎么辦呢,小程序提供了一個(gè)自己的單位, rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。



設(shè)備

rpx換算px (屏幕寬度/750)
px換算rpx (750/屏幕寬度)



iPhone5

1rpx = 0.42px
1px = 2.34rpx



iPhone6

1rpx = 0.5px
1px = 2rpx



iPhone6p

1rpx = 0.552px
1px = 1.81rpx

我們直接用拿到iphone6的標(biāo)注圖,直接寫(xiě)rpx就好。



日歷

鏈接

個(gè)人資料

存檔