《移動WEB布局視頻教程》介紹移動web的開發基礎，高效的排版布局，常見的移動web問題，終端觸摸交互，各種bug坑如何解決等多方面。說到移動端，不得不提適配問題，大大小小的移動設備不但讓做Android和iOS的難過，因為設備大小和瀏覽器的差異，現在也讓前端開始頭疼了，不過，方法總是比問題多，我們是革命的隊伍，遇到問題就要上！

課程播放地址：http://www.php.cn/course/428.html

該老師講課風格:

教師講課生動形象，機智詼諧，妙語連珠，動人心弦。一個生動形象的比喻，猶如畫龍點睛，給學生開啟智慧之門；一種恰如其分的幽默，引來學生會心的微笑，如飲一杯甘醇的美酒，給人以回味和留戀；哲人的警句、文化的箴言不時穿插于講述中間，給人以思考和警醒。

本視頻中較為難點是移動web特別樣式處理了：

高清圖片問題

高清圖片跟我們平時下的那種電影高清圖片是不一樣的，移動Web的高清圖片的概念是我這張圖這么大，清晰度這么多，那么我們在移動設備上就該展示這么清晰。那么為什么會產生模糊呢？假如一張圖片 100px * 100px 那我們在移動設備上就以 100px * 100px 去展示，這想想也是沒有問題的。

但我們想想，在Retina屏幕，一個px等于兩個dp，那你拿 100px*100px 實際上是拿了 200dp * 200dp 物理像素去渲染，圖片就會被拉大被模糊。

在移動Web頁面上渲染圖片，為了避免圖片產生模糊，圖片的寬高應該用物理像素單位渲染，即是 100 * 100 的圖片，應該使用 100dp * 100dp。

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

那說白了，在高清屏幕下，假如100*100的圖片，那么我們就應該使用50*50的px去渲染，那如果在iPhone6 Plus下這時候dpr大于2的話，那我們就應該除以它的dpr(3)這樣的方式。

這里還給大家推薦了源碼資源的下載：http://www.php.cn/xiazai/code/2051

這個給大家分享了視頻的課件：

1.移動WEB布局視頻教程

以上就是移動WEB布局視頻教程的詳細內容，更多請關注php中文網其它相關文章！