(1) 分析網(wǎng)站, 刪減冗余內(nèi)容。根據(jù)移動終端設(shè)備受網(wǎng)絡(luò)和屏幕尺寸限制的特點(diǎn), 其瀏覽的網(wǎng)頁應(yīng)是很精簡的。這就要求我們對原有PC網(wǎng)站進(jìn)行分析, 舍棄頁面中起修飾修飾作用, 以及次要的內(nèi)容, 保留頁面的核心內(nèi)容。
(2) 編寫適合于移動終端顯示的樣式表。精簡網(wǎng)站的內(nèi)容之后, 即可編寫適合移動終端瀏覽的CSS樣式表。編寫時需注意兩個要點(diǎn):其一, 對于舍棄的內(nèi)容, 可通過display:none屬性值對進(jìn)行設(shè)置, 將其隱藏掉;其二, 用于布局的div模塊, 寬度都使用百分比進(jìn)行設(shè)置, 實(shí)現(xiàn)自適應(yīng)寬度的流體布局。
(3) 根據(jù)客戶端屏幕尺寸大小, 自動應(yīng)用樣式表。在網(wǎng)頁頁頭中的link標(biāo)簽, 使用CSS3的media query設(shè)置功能, 讓頁面能根據(jù)不同設(shè)備屏幕尺寸, 自動加載對應(yīng)的樣式表。