国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 不懂響應式,不同尺寸屏幕下的頁面很難達到最佳效果

不懂響應式,不同尺寸屏幕下的頁面很難達到最佳效果

時間:2023-05-09 20:36:01 | 來源:網(wǎng)站運營

時間:2023-05-09 20:36:01 來源:網(wǎng)站運營

不懂響應式,不同尺寸屏幕下的頁面很難達到最佳效果:
讓用戶在不同設備和尺寸的屏幕下看的頁面顯示效果更佳,屏幕空間利用更高,操作體驗更統(tǒng)一,交互方式更符合習慣。
本文主要圍繞什么是響應式,如何搭建響應系統(tǒng),響應式網(wǎng)站解析 三個部分進行闡述,在項目中提前定義好響應系統(tǒng)將有助于設計師在設計中考慮頁面在不屏幕斷點上布局,希望對正在了解響應式知識的你有幫助!?。?br>



1、什么是響應式

馬科特說,真正的響應式設計方法不僅僅是根據(jù)可視區(qū)域大小而改變網(wǎng)頁布局,而是要從整體上顛覆當前網(wǎng)頁的設計方法,是針對任意設備的網(wǎng)頁內(nèi)容進行完美布局的一種顯示機制。也就通過 CSS3’s 的媒體查詢識別當前屏幕寬度,在根據(jù)預設的屏幕斷點比對展示相應的頁面結(jié)構(gòu)布局、版式設計以及不同數(shù)量信息的展示。

1.1、相對尺寸單位-Rem

在《菜鳥教程》中是這樣描述的,使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。使用 Rem 的主要目的:方便計算尺寸、在不同寬度的設備上等比縮放內(nèi)容。




1.2、屏幕斷點

屏幕斷點是響應式設計的基礎依據(jù),它決定了我們要適配到什么樣的設備或屏幕規(guī)格,并通過“媒體查詢”這樣的技術(shù)實現(xiàn)不同 “屏幕斷點” 條件下的不同 UI 表現(xiàn)。一般情況屏幕斷點都是手機、平板、PC這三個維度設計。下圖屏幕斷點參考 《Bootstrap入門:容器、響應式斷點、Z-index - 菜鳥學院》劃分。

1.3、流體柵格

在《不懂柵格系統(tǒng),頁面元素和區(qū)域間距很難統(tǒng)一》中有詳細的介紹柵格系統(tǒng)及如何搭建,而流體柵格的核心思想是在較小的屏幕上降低柵格數(shù)量,以保證頁面元素各個屏幕下顯示效果。







2、如何搭建響應系統(tǒng)

2.1、確定策略

響應策略主要是列數(shù)量、槽寬度、頁邊距的寬度、導航欄根據(jù)窗口的寬度而發(fā)生變化。屏幕斷點之間的頁面布局,采用向下兼容的適配方式,576-767范圍的屏幕寬度用屏幕斷點576的設計布局去響應。

以《不懂框架布局,你的團隊很難輸出統(tǒng)一的頁面》模塊布局中 “全屏”為例,響應策略如下圖(具體策略以各自項目實際情況為準)。




以《不懂框架布局,你的團隊很難輸出統(tǒng)一的頁面》模塊布局“在屏幕垂直中間選擇合適的區(qū)域”為例,響應策略如下圖(具體策略以各自項目實際情況為準)。

2.2、確定規(guī)則

2.2.1、屏幕斷點上響應

頁面布局只允許在屏幕寬度縮放到屏幕斷點時發(fā)生變化,去響應下一個斷點范圍,屏幕斷點上常見的響應規(guī)則有刪除、堆疊、變更三種。




2.2.2、屏幕斷點內(nèi)響應

屏幕斷點之間頁面布局需要完全一致,不允許發(fā)生任何變化。屏幕斷點內(nèi)常見的響應規(guī)則有定高拉伸、等比例縮放、無刪減拉伸三種。




2.2.3、Hover 動作兼容

在PC的交互方式主要鼠標和鍵盤,鼠標指針移入元素上面會出現(xiàn)樣式上變化、展示更多的信息、產(chǎn)生浮層等多種情況,但平板和手機上的交互方式主要是手指,不會出現(xiàn)出現(xiàn) PC特有的 hover 動作。







3、響應式網(wǎng)站解析

3.1、微信讀書

在瀏覽器屏幕寬度為721時,截取了 “微信讀書” 頁面進行了柵格還原;同時發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 560、720、960、1331 頁面布局發(fā)生變化,根據(jù)屏幕斷點之間的頁面布局,采用向下兼容的適配方式,微信讀書屏幕斷點可以劃分為320、560、721、961、1332,響應策略如下圖:

3.2、愛彼迎

在瀏覽器屏幕寬度為744時,截取了 “愛彼迎” 頁面進行了柵格還原;同時發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 743、1127 頁面布局發(fā)生變化,根據(jù)屏幕斷點之間的頁面布局,采用向下兼容的適配方式,微信讀書屏幕斷點可以劃分為320、744、1128,響應策略如下圖:

3.3、Ant Design Pro

在瀏覽器屏幕寬度為768時,截取了 “Ant design Pro” 頁面進行了柵格還原;同時發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 575、767、991 頁面布局發(fā)生變化,根據(jù)屏幕斷點之間的頁面布局,采用向下兼容的適配方式,Ant design Pro 屏幕斷點可以劃分為320、576、768、992、1200,響應策略如下圖:




「思考,優(yōu)設網(wǎng)屬于響應式嗎?」

在瀏覽器屏幕寬度為768時,截取了 “優(yōu)設網(wǎng)” 頁面進行了柵格還原;同時發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 575、767、991 頁面布局發(fā)生變化,根據(jù)屏幕斷點之間的頁面布局,采用向下兼容的適配方式,優(yōu)設網(wǎng) 屏幕斷點可以劃分為320、576、768、992、1200,響應策略如下圖:







「總結(jié)」

在項目中,提前定義好響應系統(tǒng),確定了屏幕斷點尺寸,設計師在設計中將會考慮的更全面,也為用戶在不同設備和尺寸的屏幕下看的頁面顯示效果更佳,操作體驗更統(tǒng)一打下了基礎。根據(jù)不同的業(yè)務場景響應系統(tǒng)也不盡相同,合適自己項目的響應系統(tǒng)才是好響應系統(tǒng)。

如果你正在設計 0-1 項目的,希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應式》對你有所幫助?。?!



關(guān)鍵詞:達到,效果,響應,屏幕,尺寸

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉