viewport詳解-免費(fèi)閱讀
【正文】 不管哪種尺寸的設(shè)計(jì)稿，重構(gòu)都可以用一套方法制作好頁(yè)面，如果是背景平鋪（ backgroundsize:100%）、上面的元素 px設(shè)置大小的話，沒(méi)問(wèn)題，能順利適配其他手機(jī)的。那 devicewidth就等于720/2=360px。 Viewport 例如 iPhone4S如果不設(shè)置viewport，他就會(huì)默認(rèn)是 980px，就像把屏幕分成 980份（不是屏幕分辨率的 640px哦！）。這樣不會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局，用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分。將顯示器分成非常細(xì)小的方格，每個(gè)方格就是一個(gè)像素。 dp、 dip： dp和 dip都是 Density Independent Pixels的縮寫(xiě)，密度獨(dú)立像素，可以想象成是一個(gè)物理尺寸，使同樣的設(shè)置在不同手機(jī)上顯示的效果看起來(lái)是一樣的。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。所以我們就忽略它們吧。 pt是標(biāo)準(zhǔn)印刷上常用的單位， 72pt的長(zhǎng)度為 1英寸。 屏幕分辨率：指在橫縱向上的像素點(diǎn)數(shù)，單位是 px， 1px=1個(gè)像素點(diǎn)。 dpi： dots per inch，最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度，就是打印機(jī)可以在一英寸內(nèi)打多少個(gè)點(diǎn)。不需要我們?nèi)?shū)寫(xiě)多套尺寸。我們重構(gòu)移動(dòng)頁(yè)面的時(shí)候使用 px其實(shí)跟安卓開(kāi)發(fā)中使用 dp是一樣的，有個(gè)背后的系數(shù)會(huì)幫我們把數(shù)值適配到這款手機(jī)的大小。 為什么？網(wǎng)頁(yè)重構(gòu)時(shí)使用的單位 px，就是通常所說(shuō)的像素，是網(wǎng)頁(yè)設(shè)計(jì)中使用最多的長(zhǎng)度單位。見(jiàn)下頁(yè)！！ Viewport iPhone6的屏幕分辨率是1334*750px， ppi是 326，所以系數(shù)是 2x。 以上解釋了為什么給元素賦予固定的像素值，給字體 16px的大小，在大部分手機(jī)里居然能看起來(lái)差不多大小，也明白了我們并不需
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1