移動WEB佈局影片教學

黄舟
發布: 2017-08-25 16:44:23
原創
1839 人瀏覽過

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

移動WEB佈局影片教學

課程播放網址: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板