<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      玉林網站設計:用戶界面設計者的技巧

      日期:2020-04-09 閱讀:261   作者:玉林網站設計開發公司

      隨著高分辨率智能手機和iMac視網膜越來越明顯的是,網絡和移動設計師在設計過程中需要考慮視網膜顯示視網膜顯示分辨率將多個像素分組到同一物理屏幕空間中。

      這意味著如果設計得當,內容看起來會更清晰,那么UI設計師應該如何處理retina屏幕呢?目前有哪些技術可用,處理最大用戶群的最佳方法是什么?

      我想介紹處理retina/hi-DPI屏幕和創建只起作用的界面的最可靠方法。如果您按照本指南進行操作,您一定會找到解決retina顯示難題的適用技巧和實用解決方案。

      操作視網膜裝置

      第一步是檢查屏幕顯示基于高DPI分辨率?,F在有些設備有@3x大小,您需要在顯示圖像之前檢查許多屏幕分辨率。使用@3x圖像始終可以安全,但它們也要大得多,需要更多帶寬才能下載。

      這張支票可以用SWT公司但是也有很多不同的方法使用JavaScript本教程更多信息

      視網膜就緒圖標的一個很好的技巧是使用免費的iconfont而不是位圖圖像。象形異體字是一個非常流行的選擇,完全免費,開源,并提供了一個圖標庫來選擇。

      另一種選擇是SVG圖像而不是位圖。這些SVG是完全可伸縮的向量,已經慢慢獲得完全瀏覽器支持.

      唯一的困難是從頭開始設計SVG并學習如何正確地導出它們,這比使用PNG或JPEG要復雜得多。另外SVG對于像照片這樣的詳細圖像沒有用處,因為它實際上是一種矢量文件類型。

      但SVG有更大的空間自定義動畫在所有分辨率下都顯示清晰。

      我們的目標是根據具體情況來決定文件類型和瀏覽器檢查。有些圖片更適合jpg,有些網站更適合CSS vs JS retina檢查。我個人更喜歡CSS,但我建議兩者都試試看你喜歡什么。

      CSS背景圖像

      處理自定義背景的最簡單方法是視網膜背景圖像使用背景大小屬性.

      這通常是檢查視網膜圖像的最快方法,因為它們可以在所有設備上工作,甚至是在非視網膜設備上工作。如果你不介意延長加載時間,在CSS中使用過度優化的圖像不會造成傷害。

      另一種方法是基于JavaScript檢查或后端服務器檢查加載不同的CSS文件。

      但是也許處理CSS的最好方法是CSS視網膜媒體查詢。這些查詢檢查像素密度,并為這些設備加載不同的背景圖像(同時調整背景大?。?。

      CSS通常是處理圖片的最簡單的方法,但不能用于后期圖片,它們要復雜得多,要么以盡可能高的分辨率上傳,要么用JavaScript更新。

      如果您不關心加載時間,那么只需對所有圖像使用最大的分辨率即可。如果不關心,那么您將需要使用免費的JavaScript庫手動上載@2x和@3x圖像,如視網膜.js.

      JavaScript檢查

      如果你想要對視網膜分辨率內容進行最大程度的控制,那么你需要JavaScript檢測分辨率使用內置的JavaScript方法。

      你會發現很多免費教程用于檢測JavaScript視網膜顯示,但這只是戰斗的一半,一旦你知道屏幕分辨率,你就需要相應地更新圖像。

      我建議使用一個預先構建的解決方案,以節省時間和過程中的頭痛。

      開發人員永遠不想重新發明輪子。所以,如果其他人已經解決了這個問題,你為什么要費心從頭開始呢?


      推出您自己的解決方案的唯一原因是您需要自定義功能。在這種情況下,請查看下面的鏈接,了解如何實現自定義JS retina檢查。

      否則,繼續滾動并獲取我在下一節中列出的一個免費JS庫。

      • 支持高密度視網膜顯示的5種方法

      • 使用jQuery的簡單2x視網膜圖像

      • 提供視網膜圖形到您的網站

      開源視網膜工具

      有幾十種自定義的視網膜工具來檢測和管理視網膜圖像,這些并不總是最容易實現的,但從長遠來看,它們可以讓你的觀眾更快樂。

      那么你應該選擇哪一個開始呢?沒有錯的答案。

      我想提供一些最流行的工具,讓你有機會選擇最適合你的網站。

      視網膜.js

      這個Retina.js庫是一個免費的開源JavaScript代碼庫,可以自動檢測視網膜分辨率和屏幕大小。該腳本還檢查是否存在遵循蘋果設計指南的現有高分辨率圖像,如果存在,它將切換到顯示高分辨率版本。

      命名約定的后綴是@2倍在文件類型之前。所以如果我的圖像.jpg你也會想要[email protected]我的照片在同一個文件夾中

      這是最簡單的腳本之一,因為它實際上只是即插即用。但它也需要一些視網膜內容的知識才能使其完美工作。如果你剛剛開始,這真的是一個很好的腳本,你不能出錯的默認功能。

      jQuery視網膜

      jquery js retina plugin

      另一個選擇是jQuery視網膜由jQuery庫提供支持,這有點不同,因為它運行在HTML5上數據屬性.

      只需將圖像URL值傳遞給數據視網膜每個需要視網膜圖像替換的圖像標記中的屬性。它確實需要更硬的編碼,但也最容易使用自定義選項回滾GitHub頁面有更多關于安裝基本步驟的信息。

      可濕性粉劑視網膜2x

      如果你是WordPress用戶可濕性粉劑視網膜2x可能是從GitHub添加JS插件的一個很好的替代品,WP Retina插件直接與WordPress一起檢查Retina大小的圖片并自動替換它們。

      這是另一個即插即用的解決方案,你只需激活插件,讓它運行。超級容易使用,絕對是一個干凈的解決方案,為非技術性的WP用戶。

      密級.js

      我最喜歡的是密集.js庫支持不同的設備比率。不是所有的視網膜顯示器都是2倍大小。其他比率可以包括1.5倍或3倍。

      此插件自動檢測使用的屏幕密度并相應地調整圖像。有很多選項,因此自定義是沒有問題的github開始和在線文檔更多信息

      如果你正在尋找更多的視網膜顯示資源,我也推薦這些插件。

      • ipad和iphone的CSS媒體查詢

      • HTML中的自適應圖像

      • 開關箱和燈箱

      • Grails視網膜圖像插件

      • 選擇響應圖像解決方案

      玉林網站設計希望這種材料能提供足夠多的幫助你處理視網膜顯示器上的圖像和媒體,因為CSS將自動縮放所有分辨率,你真的不需要擔心像頁邊距或頁面寬度這樣的事情。

      但是像圖標和照片這樣的頁面媒體需要為視網膜設備定制設計。


      网赚团队