視口

在前一段時間,我曾經(jīng)寫過一篇關(guān)于viewport的文章。最近由于在接觸移動端開發(fā),對viewport有了新的理解。于是,打算重新寫一篇文章,介紹移動端視口的相關(guān)概念。

關(guān)于這篇文章說到的所有知識,本質(zhì)上離不開以下代碼

<meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

@media all and (max-width: 320px) {    // do something
}

了解過移動端開發(fā)的朋友,其實(shí)對以上的代碼就不會陌生。上面的代碼,主要涉及到meta視口標(biāo)簽與媒體查詢。單單以上簡短的代碼就需要明白:

  • 像素(pixel)

  • 視口(viewport)

  • 分辨率(resolution)

  • meta視口標(biāo)簽

  • 媒體查詢(media query)

  • JavaScript相關(guān)的屬性和方法

  • 如何實(shí)現(xiàn)移動端響應(yīng)式適配的問題

那就進(jìn)入主題吧:)

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式