視口
在前一段時(shí)間,我曾經(jīng)寫(xiě)過(guò)一篇關(guān)于viewport的文章。最近由于在接觸移動(dòng)端開(kāi)發(fā),對(duì)viewport有了新的理解。于是,打算重新寫(xiě)一篇文章,介紹移動(dòng)端視口的相關(guān)概念。
關(guān)于這篇文章說(shuō)到的所有知識(shí),本質(zhì)上離不開(kāi)以下代碼
<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 }
了解過(guò)移動(dòng)端開(kāi)發(fā)的朋友,其實(shí)對(duì)以上的代碼就不會(huì)陌生。上面的代碼,主要涉及到meta視口標(biāo)簽與媒體查詢(xún)。單單以上簡(jiǎn)短的代碼就需要明白:
像素(pixel)
視口(viewport)
分辨率(resolution)
meta視口標(biāo)簽
媒體查詢(xún)(media query)
JavaScript相關(guān)的屬性和方法
如何實(shí)現(xiàn)移動(dòng)端響應(yīng)式適配的問(wèn)題
那就進(jìn)入主題吧:)