多屏的環(huán)境讓我們不得不考慮網(wǎng)絡(luò)內(nèi)容在各個尺寸中的表現(xiàn), 均可正常訪問和極佳的用戶體驗(yàn)。
響應(yīng)式布局可以更具屏幕尺子的大小對內(nèi)容和布局做出適當(dāng)?shù)恼{(diào)成, 從而提供更好的用戶感受。也是因?yàn)轫憫?yīng)式布局的出現(xiàn), 開發(fā)者也無需對不同尺寸設(shè)備而特殊定制不同的頁面, 這大大降低了開發(fā)成本和縮短了開發(fā)時間。
這樣的方法也同樣存在著缺點(diǎn)。 缺點(diǎn)是同樣的資源被加載,但因?yàn)檎故酒脚_所限并不能全部顯示。
View Port
http://wiki.jikexueyuan.com/project/fend_note/images/R/responsive_viewport.jpg" alt="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
針對不同尺寸的屏幕進(jìn)行開發(fā),因少使用定寬而使用自適應(yīng)單位。
http://wiki.jikexueyuan.com/project/fend_note/images/R/responsive_design0.jpg" alt="" />
需求會更具具體設(shè)備而產(chǎn)生變化。(例如布局方式發(fā)生了變化)
@media screen and (max-width: 320px) {
/* 視窗寬度小于等于 320px */
}
@media screen and (min-width: 320px) {
/* 視窗寬度大于等于 320px */
}
@media screen and (min-width: 320px) and (max-width: 1000px){
/* 視窗寬度大于等于 320px 且小于等于 1000px */
}