1/3
課程視頻：移動(dòng) Web 開發(fā)入門
概念
移動(dòng) Web 開發(fā)簡(jiǎn)單的說(shuō)就是將網(wǎng)頁(yè)更好的顯示在移動(dòng)端的一些設(shè)置：
- 流式布局。
- 即百分比自適應(yīng)布局或非固定像素布局。
- 通過(guò)將盒子的寬度設(shè)置成百分比參照屏幕的寬度進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
- viewport 視口：
- 視口的縮放配置。目的是為了讓 CSS 樣式中的邏輯像素匹配到手機(jī)終端的物理像素，從而達(dá)到讓網(wǎng)頁(yè)視圖匹配手機(jī)屏幕的效果。
- rem 單位的使用。目的是為了我們只需要一套代碼就可以適應(yīng)大部分不同屏幕的手機(jī)。
以上兩點(diǎn)雖然實(shí)現(xiàn)的目的不同，但實(shí)現(xiàn)的方法原理基本一致。
- 自適應(yīng)布局：實(shí)現(xiàn)在不同屏幕分辨率的終端上展示匹配分辨率的頁(yè)面，也就是說(shuō)一個(gè)頁(yè)面能夠兼容多個(gè)終端。
- 響應(yīng)式布局：一般根據(jù)屏幕尺寸劃分為手機(jī)、平板和電腦。頁(yè)面能根據(jù)三者的分辨率界線，展示匹配不同終端的不同頁(yè)面，它需要不同的 CSS 布局樣式來(lái)適應(yīng)不同的終端。
基礎(chǔ)準(zhǔn)備
在正式開始本教程的學(xué)習(xí)前，您需要掌握一些前端基礎(chǔ)知識(shí)：
- html(html5)
- CSS2(CSS3)
提升準(zhǔn)備
必備知識(shí)點(diǎn)：
- Adobe PhotoShop
以上是本小節(jié)的主要知識(shí)點(diǎn)。