響應式布局和自適應布局
響應式布局和自適應布局

掃描二維碼訪問該頁面

2020-12-18 14:14:42 網站建設 0

響應式布局

由于國內的使用場景與國外有很大的不同,也就造成國內的很多產品對于移動端都格外的重視,因此如果網站過于復雜,移植到移動端就會存在大量的問題,要想真正了解其背后的原理,我們先了解一下桌面端與移動端的布局思路。

布局和屏幕顯示息息相關,很多設計師都缺少對小屏幕的處理方式,那么小屏幕的尺寸是多少,最小多少算小屏幕,這是我們首先需要明確的。我們分析一下市面上共有共有多少小屏幕尺寸,數據來自百度流量研究院2020年10月份的數據:

屏幕尺寸分布圖

如果我們把 1920 x 1080 以下的分辨率都定義為小屏,則有39.55% 都是小屏幕用戶。
而針對不同的小屏,我們首先需要確定分辨率的下限,這里一般建議大家可以根據用戶自身的使用場景去分析,比如針對銷售的場景,會有許多外出上門拜訪的銷售,這時候就必須考慮到筆記本的小屏幕用戶,一般做到 1440×900 兼容、1280×720 能用即可。
1440×900 兼容,通常會針對主要頁面去設計,如果產品中,該分辨率下的用戶較多,可提出針對該分辨率情況進行單獨適配,簡單優化頁面布局來兼容空間不足的問題。
1280×720 能用,我說說我實際工作的思路,我們可以通過前端代碼屏幕縮放,將小分辨率的屏幕縮小,因而能看見更多的內容。通常做法是將1440px以下的尺寸,進行 Zoom 的90%的縮放,這樣能夠在電腦上看到更完整的信息,但同時也會有相應的缺點,由于整體縮放,需要檢查前端代碼對于整體縮放有沒有進行適配,需要對頁面進行再次走查,同時網站內容都會相應縮小,算是一個迫不得已的方式。


普及一個知識點,什么是「響應式布局」、什么是「自適應布局」。
響應式布局:是指網頁(一套前端代碼)同時能兼容多個終端,根據每個終端分辨率大小自動調整尺寸。

響應式布局

我舉個例子,響應式布局就是將所有元素進行變形、隱藏,但是對于元素的布局等并沒有實質變化,因此響應式大多出現在官網的場景中,這樣的適配更輕量簡單,不會有太多的困擾,比如常見官網都是采取響應式的方式進行開發。
對于設計而言,響應式一般是先完成對桌面端的設計后再考慮對于移動端的適配,是一個元素由多到少的設計過程。

響應式布局案例演示

自適應布局:是指網頁(多套前端代碼)能夠同時滿足多個分辨率的終端,并且多個終端之間布局差異較大。

自適應布局
舉個例子,公司需要設計一個桌面端、Pad端、移動端的三端產品,而且每一個端的布局方式都有著截然不同的思路,而需要滿足這樣的布局場景的最好的辦法就是自適應布局,通過判斷分辨率、設備ID,來進行布局的修改,比如語雀都是采取自適應的方式。

自適應布局

公司目前設計的網站多為自適應網站,適配多終端,2K電視、PC臺式電腦、筆記本電腦、平板電腦和手機端,均可以完美瀏覽。兼容主流的各種瀏覽器。符合HTML5+CSS3的主流設計技術。

發表留言

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

安徽快三助手走势图 傲人沈阳棋牌大赛 澳洲幸运8开奖公告 河南麻将的一种简单玩法 吉林十一选五预测 快乐扑克玩法中奖规则 上下分麻将代理 虎途app网址 一分时时彩计划人工 吉林麻将的玩法 七乐彩几个号才中奖 今晚华东15选5开奖号码 友乐广西麻将来牌规律 nba灰熊vs快船 福建体彩31选7中奖新规 辉煌棋牌游戏官网下载 陕西心悦麻将下载