移动端像素概念,viewport,适配
想必大家對(duì)移動(dòng)端像素的概念比較疑惑,總結(jié)一下我們經(jīng)常會(huì)聽到的幾個(gè)詞。
一、屏幕尺寸
平時(shí)我們通常提到手機(jī)的尺寸,比如iPhone6是4.7英寸的。手機(jī)的屏幕是以英寸為單位的。我們平時(shí)使用最多的單位是:毫米、厘米、米。對(duì)于英寸并不熟悉,首先我們先來(lái)?yè)Q算一下單位:1英寸(inch)=2.54厘米(cm)。那么,英寸到底表示 的是什么呢?是手機(jī)的寬還高?原來(lái)英寸代表的意思是:手機(jī)屏幕對(duì)角線的長(zhǎng)度。
常見的屏幕尺寸有:2.4、2.8、3.5、3.7、4.2、5.5、5.6等
?
?
二、屏幕分辨率
指在橫縱向上的像素點(diǎn)數(shù),單位是px。1px=1個(gè)像素點(diǎn)數(shù)(注:這里的像素指的是物理設(shè)備的1個(gè)像素)。
一般以縱向像素 * 橫向像素 表示一個(gè)手機(jī)的分辨率。比如:1980*1080
在同一個(gè)設(shè)備上,它的像素個(gè)數(shù)是固定的,這是廠商在出廠時(shí)就設(shè)置好了的。只有不同的設(shè)備之間,才有像素大小的區(qū)別。
這里有人提出一個(gè)問題:既然在同一個(gè)設(shè)備上,像素點(diǎn)數(shù)早就設(shè)定好了,那電腦上可以調(diào)整分辨率是怎么回事?
?
其實(shí),當(dāng)我們調(diào)整電腦分辨率的時(shí)候,無(wú)論怎么調(diào),像素點(diǎn)數(shù)還是那么多。
入上圖我的電腦所示,系統(tǒng)推薦的是1920x1080 px的分辨率,這表示什么意思呢?剛才我們也提到了,微軟在這塊屏幕上橫向設(shè)置了1080個(gè)像素,豎向設(shè)置了1920個(gè)像素。無(wú)論怎么調(diào)整,這個(gè)數(shù)字是不會(huì)變了。那么,為什么我們還能調(diào)整分辨率呢?比如我們調(diào)整到1336x760,按照定義,橫向就是760個(gè)像素,豎向就是1336個(gè)像素了。其實(shí)呢,你把分辨率調(diào)成1336x760,系統(tǒng)就會(huì)分配給你1336x760有效像素個(gè)數(shù),也就是真實(shí)的色彩塊。其他的個(gè)數(shù)呢,就由系統(tǒng)自作主張,通過一系列運(yùn)算給你一個(gè)模擬色彩塊,填充成正好1920x1080 個(gè)色彩塊。這些拿來(lái)充數(shù)的像素塊,和真實(shí)的像素塊放到一起,我們不易察覺。
蘋果系列手機(jī)分辨率:
| 3GS | 320x480 | 163 |
| 4s | 640x960 | 326 |
| 5c | 640x1136 | 326 |
| 5s | 640x1136 | 326 |
| 6 | 750x1334 | 326 |
| 6+ | 1242x2208~1080x1920 | 401 |
注:屏幕大小和分辨率是沒有關(guān)系的,屏幕大的分辨率不一定。
我們知道蘋果手機(jī)是從4s開始火起來(lái)的,因?yàn)樗褂昧烁咔迤痢D敲词裁词?span style="color:#ffbb66;">高清屏呢?
三、高清屏
高清屏(Retina)的概念,主要是從喬布斯發(fā)布的Retina設(shè)備開始的,Retina顯示屏又叫做視網(wǎng)膜屏。事實(shí)上,Retnia這個(gè)詞更接近于一個(gè)營(yíng)銷名詞而非技術(shù)名次。因?yàn)閺哪撤N意義上來(lái)說,這是蘋果為宣傳自己的產(chǎn)品所創(chuàng)造出的名詞。蘋果也的確為這個(gè)名詞申請(qǐng)了專利。
?
主要功能:
把更多的像素點(diǎn)壓縮至一塊屏幕上,具備足夠高的物理像素密度從而使人體肉眼無(wú)法分辨其中單獨(dú)像素點(diǎn)的液晶屏。
特點(diǎn):
-
一種具備超高像素密度的液晶屏。
-
同樣大小屏幕上顯示的像素點(diǎn)由一個(gè)變成多個(gè)。
高清屏和普通屏的區(qū)別:
-
高清屏(Retain)和普通屏相比,相同區(qū)域的物理像素點(diǎn)數(shù),高清屏是普通屏的4倍。
-
高清屏的筆記本電腦色彩保真特點(diǎn)的全面展現(xiàn)
?
四、屏幕像素密度(PPI)
屏幕像素密度也叫像素密度或屏幕密度
屏幕像素密度,即屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量,英文pixels per inch,簡(jiǎn)稱PPI。這個(gè)英寸跟之前手機(jī)屏幕的尺寸一樣,也是對(duì)角線的長(zhǎng)度。所以我們可以這么理解屏幕像素密度,即在一個(gè)對(duì)角線長(zhǎng)度為1英寸的正方形內(nèi)所擁有的像素?cái)?shù)。
屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)。他們之間有一個(gè)公式:
?
這個(gè)公式真是簡(jiǎn)單明了,我們還是以iPhone6手機(jī)為例,它的尺寸為4.7英寸,分辨率為750px*1334px。套用一下公式計(jì)算一下,最后得出的PPI,結(jié)果是325.6122832234167,四舍五入326和上面表格的值就一樣了。
五、物理像素(device pixels)
?
物理像素又稱設(shè)備像素,顧名思義,顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的,通過控制每個(gè)像素點(diǎn)的顏色和亮度,使屏幕顯示出不同的圖像,屏幕從出廠那天,它的物理像素點(diǎn)就固定不變了,單位pt。它是顯示設(shè)備中最小的物理部件。
買手機(jī)的時(shí)候會(huì)有nxm`的分辨率,那是屏幕nxm個(gè)呈像點(diǎn)。一個(gè)點(diǎn)(小方格)為一個(gè)物理像素,它是屏幕能顯示的最小粒度。
任何設(shè)備的物理像素的數(shù)量都是固定的,任何一款設(shè)備上物理像素的大小是不會(huì)改變的。不同設(shè)備上物理像素的大小可能不同。
六、css像素
在做web頁(yè)面的時(shí)候,我們經(jīng)常為一個(gè)元素設(shè)置大小,比如:
div{width:200px;height:200px;background:pink; }?
那么什么是css像素呢?
css像素是個(gè)抽象的單位,主要使用在瀏覽器上,用來(lái)精確的度量(確定)web頁(yè)面上的內(nèi)容。它是為web開發(fā)者創(chuàng)造的,在css或者JavaScript中使用的一個(gè)抽象層。一般情況下,css像素被稱為與設(shè)備無(wú)關(guān)像素(device-independent)簡(jiǎn)稱為:DIPS。在一個(gè)標(biāo)準(zhǔn)的顯示密度下,一個(gè)css像素對(duì)應(yīng)一個(gè)設(shè)備像素(物理像素)。css是一個(gè)抽象單位,因?yàn)槌氏竦臅r(shí)候需要在設(shè)備上呈像,到底呈現(xiàn)出來(lái)是什么樣子與一個(gè)css像素包含多少個(gè)物理像素有關(guān)。css像素是瀏覽器特有的概念。
物理像素與css像素的關(guān)系:
如上樣式所示:一個(gè)width為200px的元素,它占據(jù)了200個(gè)css像素,但200個(gè)css像素占據(jù)了多少個(gè)物理像素取決于屏幕的特性(是否是高密度,即像素比)和用戶的縮放行為。
如果在iPhone的視網(wǎng)膜屏上,視網(wǎng)膜的像素密度是普通屏幕的兩倍,這個(gè)時(shí)候200px個(gè)css像素就跨越了400個(gè)設(shè)備像素。如果用戶放大,它將跨越更多的設(shè)備元素。
?
假設(shè)我們用PC瀏覽器打開一個(gè)頁(yè)面,瀏覽器此時(shí)的寬度為1000px,頁(yè)面上同時(shí)有一個(gè)500px寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。
但如果我們把頁(yè)面放大(通過“Ctrl鍵”加上“+號(hào)鍵”),放大為200%,也就是原來(lái)的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。
此時(shí)我們既沒有調(diào)整瀏覽器窗口大小,也沒有改變塊狀元素的css寬度,但是它看上去卻變大了一倍——這是因?yàn)槲覀儼袰SS像素放大為了原來(lái)的兩倍。
也就是說默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的,但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在高PPI的設(shè)備上,CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。
?
七、設(shè)備獨(dú)立像素
設(shè)備獨(dú)立像素也稱為密度無(wú)關(guān)像素,可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系的一個(gè)點(diǎn),這個(gè)點(diǎn)代表可以由程序使用的虛擬像素(比如:css像素),然后由相關(guān)系統(tǒng)轉(zhuǎn)化為物理像素。是設(shè)備對(duì)接css像素的接口,一旦css像素與獨(dú)立設(shè)備像素聯(lián)系起來(lái)(width=device-width)此時(shí)像素比才能真正發(fā)揮作用。
設(shè)備獨(dú)立像素有什么用?
可以把它看成是設(shè)備提供出來(lái)的接口,它用來(lái)對(duì)接應(yīng)用的一些概念:比如瀏覽器中的css像素。只有當(dāng)瀏覽器廠商對(duì)接上獨(dú)立像素時(shí),瀏覽器廠商設(shè)計(jì)的移動(dòng)端規(guī)則才能發(fā)揮作用。否則采用默認(rèn)的規(guī)則。
設(shè)備獨(dú)立像素在哪里能看到呢?
我們可以F12打開瀏覽器,切換到移動(dòng)端,此時(shí),顯示的值就是設(shè)備獨(dú)立像素。
?
八、位圖像素
一個(gè)位圖像素是柵格圖像(比如:png、jpg 、gif)等,最小的數(shù)據(jù)單元。
一個(gè)位圖像素對(duì)應(yīng)一個(gè)物理像素,圖片才能得到完美清晰的展示。
?
九、設(shè)備像素比(DPR)
官方定義:設(shè)備物理像素和設(shè)備獨(dú)立像素的比例。英文:device pixels ratio也就是:
device pixels ratio = 物理像素/設(shè)備獨(dú)立像素可以通過 window.devicePixelRatio 來(lái)獲取,比如:
console.log(window.devicePixelRatio)在iPhonex下面結(jié)果為:3
?
這個(gè)比值是個(gè)具體的數(shù),也就是說在iphoneX中,物理像素 = 3倍設(shè)備獨(dú)立像素。
在iPhone6中就不一樣了:如圖所示:
?
占據(jù)一塊iPhone 6的屏幕需要750x1334個(gè)物理像素。
占據(jù)一塊iPhone 6的屏幕需要375x667個(gè)設(shè)備獨(dú)立像素。
也就是說1個(gè)設(shè)備獨(dú)立像素=4倍物理像素 (面積)。
所以我們可以簡(jiǎn)化成下面的表示方法:
設(shè)備像素比=一個(gè)方向上占滿一塊屏幕需要的物理像素個(gè)數(shù)/一個(gè)方向上占滿屏幕需要的設(shè)備獨(dú)立像素的個(gè)數(shù)。當(dāng)我們寫上meta標(biāo)簽后,width=device-width 使css像素和設(shè)備獨(dú)立像素聯(lián)系了起來(lái),即css像素等于設(shè)備獨(dú)立像素。在iPhone6下,即:
1css像素=4倍物理像素
?
10、像素總結(jié)
現(xiàn)在我們了解了四個(gè)像素分別是:物理像素、css像素、位圖像素和設(shè)備獨(dú)立像素。
-
物理像素:是設(shè)備呈現(xiàn)出的最小單元
-
位圖像素:是圖片的最小單元
-
css像素是瀏覽器上的一個(gè)抽象單位
-
設(shè)備獨(dú)立像素也是一個(gè)抽象的層,是設(shè)備提供出來(lái)的接口
-
像素比:物理像素/設(shè)備獨(dú)立像素
由于物理像素、設(shè)備獨(dú)立像素,像素比都是設(shè)備中的概念,與瀏覽器沒有關(guān)系,在設(shè)備出廠的時(shí)候這些參數(shù)都已經(jīng)固定了。所以在默認(rèn)情況下,設(shè)備獨(dú)立像素和像素比在web開發(fā)中沒有意義。
對(duì)于web開發(fā)來(lái)說,我們使用的每一個(gè)css和JavaScript定義的像素本質(zhì)上代表的都是css像素,我們?cè)陂_發(fā)中并不在意一個(gè)css像素到底跨越了多少個(gè)物理像素。我們將這個(gè)依賴于屏幕特性和用戶縮放程度的復(fù)雜運(yùn)算交給了瀏覽器。
11、視口
移動(dòng)端瀏覽器廠商面臨的問題:
他們?nèi)绾螌?shù)以萬(wàn)計(jì)甚至數(shù)以億計(jì)的PC端網(wǎng)頁(yè)完整的呈現(xiàn)在移動(dòng)端設(shè)備上?并且不會(huì)出現(xiàn)橫向滾動(dòng)條?
三個(gè)viewport的理論:
首先,移動(dòng)設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示,即使是那些不是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為viewport的話,因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬,所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí),必然會(huì)因?yàn)橐苿?dòng)設(shè)備的viewport太窄,而擠作一團(tuán),甚至布局什么的都會(huì)亂掉。如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話,某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂,所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值,比如980px,這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport(布局視口)這個(gè)layout viewport的寬度可以通過document.documentElement.clientWidth 來(lái)獲取。
然而,layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的,所以我們還需要一個(gè)viewport來(lái)代表 瀏覽器可視區(qū)域的大小,ppk把這個(gè)viewport叫做 visual viewport (視覺視口)。visual viewport的寬度可以通過window.innerWidth 來(lái)獲取
現(xiàn)在我們已經(jīng)有兩個(gè)viewport了:layout viewport 和 visual viewport。但瀏覽器覺得還不夠,因?yàn)楝F(xiàn)在越來(lái)越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì),所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport。所謂的完美適配指的是,首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容;第二,顯示的文字的大小是合適,比如一段14px大小的文字,不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清,理想的情況是這段14px的文字無(wú)論是在何種密度屏幕,何種分辨率下,顯示出來(lái)的大小都是差不多的。當(dāng)然,不只是文字,其他元素像圖片什么的也是這個(gè)道理。ppk把這個(gè)viewport叫做 ideal viewport(理想視口),也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport。
理想視口并沒有一個(gè)固定的尺寸,不同的設(shè)備擁有有不同的理想視口。所有的iphone的理想視口寬度都是320px,無(wú)論它的屏幕寬度是320還是640,也就是說,在iphone中,css中的320px就代表iphone屏幕的寬度。但是安卓設(shè)備就比較復(fù)雜了,有320px的,有360px的,有384px的等等,關(guān)于不同的設(shè)備ideal viewport的寬度都為多少,可以到http://viewportsizes.com去查看一下,里面收集了眾多設(shè)備的理想寬度。
視口總結(jié):ppk把移動(dòng)設(shè)備上的viewport分為 布局視口 、 視覺視口 和 理想視口 三類,其中的理想視口是最適合移動(dòng)設(shè)備的viewport,理想視口 的寬度等于移動(dòng)設(shè)備的屏幕寬度,只要在css中把某一元素的寬度設(shè)為理想視口 的寬度(單位用px),那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了,也就是寬度為100%的效果。理想視口 的意義在于,無(wú)論在何種分辨率的屏幕下,那些針對(duì)理想視口而設(shè)計(jì)的網(wǎng)站,不需要用戶手動(dòng)縮放,也不需要出現(xiàn)橫向滾動(dòng)條,都可以完美的呈現(xiàn)給用戶。
獲取三個(gè)視口:
???????var layout=document.documentElement.clientwidth; //獲取布局視口 var visual = window。innerwidth; //獲取視覺視口 幾乎全部支持 var ideal = screen.width; //有的代表理想視口的寬度,有的代表設(shè)備的分辨率利用meta標(biāo)簽對(duì)viewport進(jìn)行控制
移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport,也就是那個(gè)比屏幕要寬的viewport,但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí),我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢?這就該輪到meta標(biāo)簽出場(chǎng)了。
我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí),最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=0"> initial-scale : 初始縮放的比例 user-scalable:是否允許縮放(no/yes),默認(rèn)允許 minimum-scale:允許縮放的最小比例 maximum-scale:允許縮放的最大比例 沒有這些指令默認(rèn)為20%-500%,有這些指令可擴(kuò)大到10%-100%,安卓webkit 不支持minimum-scale屬性(默認(rèn)縮放范圍為25%-400%),ie壓根不認(rèn)識(shí)和兩個(gè)屬性。 ?該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度,同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求,但讓viewport的寬度等于設(shè)備的寬度,這個(gè)應(yīng)該是大家都想要的效果,如果你不這樣的設(shè)定的話,那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport,也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。
這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢,又都有什么作用呢?
meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的,目的就是解決移動(dòng)設(shè)備的viewport問題。后來(lái)安卓以及各大瀏覽器廠商也都紛紛效仿,引入對(duì)meta viewport的支持,事實(shí)也證明這個(gè)東西還是非常有用的。
?
設(shè)置理想視口:
要得到 理想視口就必須把默認(rèn)的布局視口的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度,所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。
<meta name="viewport" content="width=device-width">可以看到通過width=device-width,所有瀏覽器都能把當(dāng)前的viewport寬度變成理想視口的寬度,但要注意的是,在iphone和ipad上,無(wú)論是豎屏還是橫屏,寬度都是豎屏?xí)r理想視口的寬度。
<meta name="viewport" content="initial-scale=1">這句代碼也能達(dá)到和前一句代碼一樣的效果,也可以把當(dāng)前的的viewport變?yōu)?理想視口。
因?yàn)閺睦碚撋蟻?lái)講,這句代碼的作用只是不對(duì)當(dāng)前的頁(yè)面進(jìn)行縮放,也就是頁(yè)面本該是多大就是多大。那為什么會(huì)有 width=device-width 的效果呢?
要想清楚這件事情,首先你得弄明白這個(gè)縮放是相對(duì)于什么來(lái)縮放的,因?yàn)檫@里的縮放值是1,也就是沒縮放,但卻達(dá)到了 ideal viewport 的效果,所以,那答案就只有一個(gè)了,縮放是相對(duì)于 ideal viewport來(lái)進(jìn)行縮放的,當(dāng)對(duì)ideal viewport進(jìn)行100%的縮放,也就是縮放值為1的時(shí)候,不就得到了 ideal viewport 嗎?事實(shí)證明,的確是這樣的
但如果 width 和 initial-scale=1 同時(shí)出現(xiàn),并且還出現(xiàn)了沖突呢?比如:
<meta name="viewport" content="width=400, initial-scale=1">width=400 表示把當(dāng)前 viewport 的寬度設(shè)為400px,initial-scale=1 則表示把當(dāng)前 viewport 的寬度設(shè)為ideal viewport的寬度,那么瀏覽器到底該服從哪個(gè)命令呢?是書寫順序在后面的那個(gè)嗎?不是。當(dāng)遇到這種情況時(shí),瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如,當(dāng)width=400,ideal viewport 的寬度為320時(shí),取的是400;當(dāng)width=400, ideal viewport的寬度為480時(shí),取的是ideal viewport的寬度
要把當(dāng)前的viewport寬度設(shè)為ideal viewport的寬度,既可以設(shè)置 width=device-width,也可以設(shè)置 initial-scale=1,但這兩者各有一個(gè)小缺陷,就是iphone、ipad以及IE 會(huì)橫豎屏不分,通通以豎屏的ideal viewport寬度為準(zhǔn)。所以,最完美的寫法應(yīng)該是,兩者都寫上去,:
<meta name="viewport" content="width=device-width, initial-scale=1">12、適配
等比問題:
沒有加name 為viewport的meta標(biāo)簽:
一個(gè)相同css像素大小的區(qū)域在不同的設(shè)備上是等比的;在不同的設(shè)備上占據(jù)的實(shí)際物理像素大小(英寸)是不一樣的。
加name為viewport的meta標(biāo)簽:
一個(gè)相同css像素大小的區(qū)域在不同的設(shè)備上是不等比的;在不同的設(shè)備上占據(jù)的實(shí)際物理像素大小(英寸)是一樣的。
那么等比是不是一個(gè)必須需要的呢?肯定是的。百分之百還原設(shè)計(jì)稿是在不同的設(shè)備上要等比。
通過上面的結(jié)論,有的人認(rèn)為要想實(shí)現(xiàn)等比不加meta標(biāo)簽不就可以了嗎?但是如果不加meta標(biāo)簽,字體什么的就會(huì)不清晰。文字要完美清晰的展示需要加上meta標(biāo)簽。但是問題是:加上meta標(biāo)簽就不等比了,所以這就是我們要做的適配,加上meta標(biāo)簽后也要等比。百分之百還原設(shè)計(jì)圖,讓你的網(wǎng)頁(yè)在不同的設(shè)備上等比這就是適配。我們常見的適配方案有:百分比適配,rem適配和viewport適配。
(1)rem適配
rem:是一個(gè)單位,相對(duì)于根元素HTML中font-size的大小
? ? html{font-size: 40px;}#box{width: 10rem; //box的寬為 40*10=400height:300px;background: pink;/* font-size: 20px; */}rem適配代碼:
//獲取布局視口的大小 //var html=document.querySelector("html");//html.style.fontSize = document.documentElement.clientWidth/10+"px";(function(){var styleNode=document.createElement("style");var w=document.documentElement.clientWidth/10;styleNode.innerHTML="html{font-size:"+w+"px!important;}";document.head.appendChild(styleNode); })()rem適配原理:改變了一個(gè)元素在不同設(shè)備上占據(jù)的css像素個(gè)數(shù)
優(yōu)點(diǎn):沒有破壞完美視口
缺點(diǎn):px值到rem轉(zhuǎn)化太復(fù)雜
(2)視口適配
//將所有設(shè)備布局視口的寬度調(diào)整為設(shè)計(jì)圖的寬度/*var targetW = 640;var scale = screen.width/targetW;var meta = document.createElement("meta");meta.name = "viewport";meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";document.head.appendChild(meta);*///viewport/*viewport適配的原理:viewport適配方案中,每一個(gè)元素在不同設(shè)備上占據(jù)的css像素的個(gè)數(shù)是一樣的。但是css像素和物理像素的比例是不一樣的,等比的*//*viewport適配的優(yōu)缺點(diǎn):優(yōu)點(diǎn):所量即所得缺點(diǎn):沒有使用完美視口*/(function(){var targetW = 640;var scale = document.documentElement.clientWidth/targetW;var meta = document.querySelector("meta[name='viewport']");meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";})()(3)百分比適配
百分比適配相對(duì)比較簡(jiǎn)單。
高度設(shè)置百分比的條件:
所有父級(jí)元素必須有高度; 必須是塊級(jí)元素,行內(nèi)元素不起作用; ie9 以下 使用 position:ralative 的塊級(jí) 元素使用 高度百分比是無(wú)效的。 響應(yīng)式布局: 簡(jiǎn)而言之,就是頁(yè)面元素的位置隨著屏幕尺寸的變化而變化,通常會(huì)用百分比來(lái)定位,而在設(shè)計(jì)上需要預(yù)留一些可被“壓縮”的空間 (如果高度不能設(shè)置百分比的時(shí)候 可以把已經(jīng)設(shè)置的margin,padding 設(shè)置成百分比的形式,預(yù)留出唄被壓縮的空間) —— 相對(duì)比較適用于內(nèi)容需要一屏展示。
總結(jié)
以上是生活随笔為你收集整理的移动端像素概念,viewport,适配的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: js字符串的操作方法
- 下一篇: axios基础和封装