移動WEB佈局影片教學

《移動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中文網其他相關文章！