如何自適應不同的解析度介面?

來源:互聯網
上載者:User

   首先呢來看一張圖:

  這是2個半月騰訊遊戲官網的解析度資料,可以看出來PC端裡1024*768佔20%、1920*1080佔14%。而這2個解析度的顯示寬度相差了接近一倍。

  而現在設計師的設計稿普遍輸出尺寸都是1920,所以設計師經常也會擔心:小解析度下能看到嗎?或者需要為手機端單獨做一版嗎?所以我們需要用一些技巧來讓大多數使用者能看到的頁面效果是一樣的。

  一、PC端

  【舉例1】http://up.qq.com/2014/life/ 1920*1080下顯示。

  設計的很美觀 但是如果直接按原始大小做,小解析度玩家只能看到中間的人物而已。

  經常我們做全flash站的時候,會看到多媒體的同學會為了配合多解析度做展示上的自適應。

  而重構其實純靠css也可以實現同樣的縮放自適應:

  這樣不會因為解析度小而只能看到中間一個地區,或者出現捲軸影響體驗。

  實現思路:

  1: 針對IE:IE有個zoom屬性。雖然經常我們用它來清浮動什麼的。但是它在縮放元素上也是很強大的。eg:被設定zoom:0.5的元素會以該元素的左上方為原點在直接被縮小一半,所佔據的文檔流內體積也會減少一半(IE7和8+對zoom後的元素的margin值理解不同可以注意下,不過單純縮放元素時不太需要用到)。

  firefox下呢,就可以使用css3的transform:scale()。(需要額外設定transform-origin:0 0為縮放原點)。

  另外zoom也被webkit支援,scale還是zoom請自行選擇~

  2. 接下來我們就可以按設計稿直接切成成一個巨大無比的1920*1000的頁面。

  3. 然後擷取使用者的當前視窗尺寸,eg當前視窗寬1200,那麼我們需要縮放的比例 zoom=1200/1920=0.625。然後把我們的主顯示的父框縮小0.625倍就可以啦~(當然為了高度不出捲軸,高度的尺寸也要納入計算範圍)

  是不是很簡單呢?以後遇到會影響內容瀏覽的大頁面的時候 可以考慮用這種方法做一個縮放哦~

  【舉例2】http://game.qq.com/happy/main.htm (不好意思拿出了11年的頁面,不過這個思路看起來很清楚)

  這個主體是固定尺寸的,然後通過js來計算定位和銜接背景做到自適應&無捲軸。可以看到跟上邊的例子比這些人物的尺寸都沒有改變。

  計算思路神馬的因為以前做過分享所以不再贅述~感興趣的同學可以查看代碼或者私下跟我討論^^

  二、移動端

  移動端雖然整體尺寸小+倒下去豎起來的尺寸差別太大,但是本質和PC端頁面沒什麼區別。

  常見的自適應自然就是:

  1. 響應式,media queries配合百分比讓頁面內容自然的去適應((http://game.qq.com);

  2. 根據瀏覽器尺寸然後進行動態定位(http://up.qq.com/2014/await/)。 手機輸入網址瀏覽或掃描下排二維碼

  如果單獨做手機端的頁面,用上述方法做自然正常顯示不是問題,但是當時間緊任務重或者資源不夠需要PC和手機使用同一套頁面時,如何適應手機就是個需要考慮的問題了。

  我們先來看看例子:

  http://up.qq.com/2014/user/user8.shtml

  開啟會發現這就是一個正常的PC端的活動頁面,但是因為從策划到上線的時間都非常緊沒有時間為手機版單獨做一套,所以就要考慮如何能適應手機瀏覽了。

  因為這個活動系列其實是拉資料後趣味展示(其實就是定位元影像片和文字在頁面上),所以定位和寬度用百分比進行後很可能在顯示的時候出問題;字型可能因為解析度小的時候換行;甚至頁面的背景和高度在適應多解析度的手機時也不易控制等等等等(我糾結了一堆的憂慮)。

  怎麼辦?

  咳~聰明的你一定想到了,嗯~就用我們PC端的第一個例子,縮放搞定!

  安卓 & iPhone

  iPhone & PC

  同一套頁面,在一個小小的操作下便可以變成手機端可以瀏覽的了。

  (因為是PC端的活動所以調用的是PC的登入&選大區組件,所以造成手機端操作有槽點,不過在本次分享裡請先忽視它>_

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。