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