viewport詳解(存儲(chǔ)版)
【正文】 要寫其他尺寸來適配不同的屏幕大小。 THANKS 。那 devicewidth就等于 1440/4=360px，和小米的 divicewidth一樣大小。 Viewport 設(shè)置了 viewport， width=devicewidth，彈出來的是設(shè)置好的寬度， 375px、 360px、 320px。而上面的元素使用固定的 px值來賦予大小的，例如左上角的人頭給了 width:100px。 mdpi、 hdpi、 xdpi、 xxdpi？ 從數(shù)值上看，蘋果和安卓有這樣的對(duì)應(yīng)關(guān)系： 單位介紹完了。 Android和 IOS都會(huì)通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸。)≈2203px 對(duì)角線分辨率除以屏幕尺寸： 2203/5≈440dpi。常見的屏幕尺寸有 、 、 、 、 、 、 、 等。viewport的講解 1. 做移動(dòng)端的疑問？ 設(shè)計(jì)和前端開發(fā)的新同學(xué)都會(huì)問一件事？屏幕尺寸應(yīng)該按照多大的來設(shè)計(jì)??？ 新同學(xué)來到一家新公司，發(fā)現(xiàn)設(shè)計(jì)給的還是 3 6 750這幾個(gè)根據(jù) iphone屏幕尺寸來的 ?尺寸 ?，不說根本不滿足眼花繚亂的安卓手機(jī)屏幕，就連 iphone本身的屏幕都已不滿足了 ~~~奇怪的是給元素賦予固定的像素值，在手機(jī)上面看到的效果也還差不多，并沒有那么多兼容性問題？ 答疑解惑前，先羅列下學(xué)習(xí)移動(dòng)頁面重構(gòu)的過程中可能看到過迷糊過放棄過的一些單位： px、 pt、 pc、 sp、 em、 rem、 dp、 dip、 ppi、 dpi、 ldpi、 mdpi、hdpi、 xhdpi、 xxhdpi…… 上面的相關(guān)單位，大家認(rèn)識(shí)幾個(gè)？ 什么是絕對(duì)長度單位？什么是相對(duì)長度單位？ 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 什么是 ppi、 dpi
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1