[CSS] 響應式設計

来源:https://www.cnblogs.com/feixianxing/p/18011533/css-responsive-design
-Advertisement-
Play Games

響應式設計旨在編寫一套代碼,在不同設備上都能有良好的表現。響應式設計有兩種思路:桌面端優先和移動端優先,它們的區別是先實現一種佈局,再使用媒體查詢設置斷點,實現不同屏幕尺寸下的佈局,逐漸過渡到另一端。即由大到小和由小到大的區別。 ...


響應式設計基本原則

1. 流式佈局

  • 頁面需要適應當前視口寬度(甚至高度);
  • 需要適配視口的元素,使用 % 單位(或者 vhvw),而不是 px
  • 使用 max-width 取代 width

2. 響應式單位

  • 對於大部分長度,使用 rem 單位取代 px,可以簡化整個佈局的自動縮放。

3. 靈活的圖像

  • 預設情況下,改變視口大小的時候,圖片不會自動縮放;
  • 使用%單位設置圖片的大小,並配合max-width使用。
  • 為不同尺寸的屏幕提供不同解析度的圖片。

4. 媒體查詢

  • 媒體查詢可以在特定的視口尺寸下應用特定的CSS樣式。(特定的視口尺寸成為斷點
  • 媒體查詢需要搭配上面三個原則才能實現響應式佈局。

響應式設計策略

桌面端與移動端的優先

響應式設計有兩種思路:桌面端優先和移動端優先,它們的區別是先實現一種佈局,再使用媒體查詢設置斷點,實現不同屏幕尺寸下的佈局,逐漸過渡到另一端。即由大到小和由小到大的區別。

在設置媒體查詢的斷點時:

  • 桌面端優先:使用max-width

    如下圖,我們首先假設我們開發的桌面端網頁應用寬度是大於1200px的,然後,我們開始考慮小尺寸屏幕的情況,設置max-width: 1200px的媒體查詢,匹配所有寬度≤1200px的屏幕。進一步細化後,最終設置max-width: 900pxmax-width: 600px

  • 移動端優先:使用min-width.

image-20240206182247182

:一種尺寸的屏幕可能會同時匹配上多個媒體查詢中的CSS選擇器,媒體查詢並不會改變選擇器的具體程度,因此最後的媒體查詢會覆蓋前面的媒體查詢。

移動端優先的優缺點

優點

  • 完全針對移動用戶進行了優化(移動端應用具有便捷性,市場需求量大,現代互聯網的許多流量都來自於手機,屬於優點);
  • 移動端的設計會更註重內容,而不是純粹的美學設計。

缺點

  • 逐步轉變到桌面版本的時候,佈局會顯得很空洞和過於簡化;
  • 由於優先考慮移動端,“畫板”小,創作自由度低,難以創建有區別度的產品;
  • 特定領域的用戶可能更關註桌面端應用而不是移動端。

斷點的選擇

image-20240206184540063

  • BAD:使用流行設備的尺寸作為斷點,這種策略針對流行的設備做了最大程度的優化,但是忽略了其它設備;同時,這種策略極度依賴設備尺寸,如果設備開發商突然修改了設備尺寸,則需要大範圍修改代碼。
  • GOOD:在互聯網上查詢儘可能多的設備尺寸,將他們聚集在一起,並選擇中間的稀疏的尺寸作為斷點。這種策略適用性廣,難度適中,推薦使用。
  • PERFECT:完全忽略設備的尺寸,只關註網頁的內容和設計,當屏幕大小到達某個尺寸後開始崩壞,則添加斷點。這種策略實現難度過大。

Screen Resolution Stats Worldwide | Statcounter Global Stats可以查看2023年屏幕尺寸的使用量占比。

image-20240206190005827

這些數據可以協助確定斷點,通常需要考慮4種或5種尺寸:手機、縱向平板、橫向平板、桌面端、(大型桌面端)。

下圖中的斷點分別是:600px,900px,1200px,1800px。

image-20240206185849050

能否使用hover?

我們使用響應式設計的初衷是為了用戶使用不同屏幕尺寸的設備都能獲得良好的體驗。但是到目前位置我們區分設備的指標只有簡單的屏幕寬度。

事實上,橫向平板和桌面端在大部分時候的佈局都是類似的,但是它們的操作方式卻截然不同,前者使用觸屏,後者使用滑鼠與鍵盤。

同時,現代UI設計者在桌面端的設計可能結合hover(滑鼠懸浮)與縮放、翻轉等動畫,這種交互設計使得部分按鈕或文本等內容在初始狀態下是隱藏的,而橫向平板的觸屏操作卻無法查看這些內容

當然,這種情況通常發生在桌面端優先的設計策略中,並且在相容橫向平板界面時,遺漏了對於交互、頁面內容的相容。

由此可見,僅通過屏幕寬度區分設備的媒體查詢是存在缺陷的,媒體查詢應進一步地檢查設備能否使用hover。

媒體查詢 匹配能否使用hover的設備

@media (hover:none){
    /* 這裡匹配不能hover的設備 */
}

@media (hover:hover){
    /* 這裡匹配可以hover的設備 */
}

SaSS實現響應式 案例

以 桌面端優先 為例,斷點選擇如下:

  • 0 - 600px:手機
  • 600 - 900px:平板豎向
  • 900 - 1200px:平板橫向
  • [1200 - 1800]:預設樣式,普通桌面端
  • 1800px + :大型桌面

使用mixin封裝一個媒體查詢管理器:

@mixin respond($breakpoint){
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content; }     // 600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content; }     // 900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content; }    // 1200px
    }
    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 112.5em) { @content; }    // 1800px
    }
}

需要註意的是,媒體查詢里的emrem單位都只和瀏覽器預設字體大小(16px)有關,和根節點的字體大小無關。

上面這段代碼中使用em而不是直接使用px是因為用戶可能會更改瀏覽器的預設字體大小,使用em更加靈活。

only screen使得媒體查詢更加嚴謹,當用戶打算列印頁面時,這些媒體查詢不應該生效。

使用

設置根節點的字體大小,使用上面封裝的mixin匹配不同的屏幕尺寸。

這裡font-size使用百分比而不是直接使用px與上文同理(用戶可能修改瀏覽器預設字體大小)。

html{
    // This defines what 1rem is
    font-size: 62.5%;   // 1rem = 10px, 10/16 = 62.5%

    @include respond(tab-land){ // width < 1200?
        font-size: 56.25%;    // 1rem = 9px, 9/16 = 56.25% 
    }

    @include respond(tab-port){ // width < 900?
        font-size: 50%;    // 1rem = 8px, 8/16 = 50%
    }

    @include respond(big-desktop){
        font-size: 75%;    // 1rem = 12px, 12/16 = 75%
    }
}

:媒體查詢需要註意代碼順序,應該先media(max-width: 900px),再media(max-width: 600px),這樣當屏幕尺寸小於600px時,雖然兩個媒體查詢都能匹配到,但是更加“精細”的後者可以正確地覆蓋前者。

如何實現響應式?

假設我們以桌面端優先,那麼此時CSS代碼都是基於桌面端屏幕尺寸的。

打開瀏覽器開發者工具,使用設備工具欄,拖動界面尺寸,觀察到哪一個斷點開始頁面開始崩壞,然後著手為該部分CSS代碼添加額外的代碼:

image-20240206235721032

需要註意由於選擇桌面端優先,並且配置媒體查詢的時候使用max-width,在寫不同尺寸的CSS代碼的時候應註意由大到小的順序。

如上圖,先tab-port(平板豎向)再phone(移動端)。

響應式圖像

應用場景:

  1. 不同尺寸的屏幕:桌面端大屏幕需要較大較清晰的圖片,移動端小屏幕對清晰度要求不高且註重圖片在網路傳輸過程中的流量消耗;
  2. 屏幕解析度不同(與尺寸無關):為低解析度屏幕(1x)和高解析度屏幕(2x)分別準備不同的圖片。

image-20240207011625432

HTML實現

實現方式

<picture class="footer__logo">
	<source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x"
			media="(max-width: 37.5em)">
	<img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo"
		 src="img/logo-green-2x.png">
</picture>
  • 首先,sourceimg的分離可以實現匹配不同的屏幕尺寸,source支持配置media,與媒體查詢一致,這裡設置的(max-width: 37.5em)匹配上手機的尺寸,當使用手機屏幕訪問時瀏覽器會自動選擇source的圖片,否則使用img的圖片。

  • 其次,使用srcset可以匹配不同解析度(像素密度)的屏幕,語法格式為:圖片路徑1 像素密度1, 圖片路徑2 像素密度2,如上述代碼,低解析度屏幕匹配1x標記,使用img/logo-*-1x.png圖片,高解析度屏幕匹配2x標記的圖片,這一選擇過程由瀏覽器自動完成。

  • 另外,可以通過設置多個source匹配多種屏幕尺寸,但沒必要,一般為手機尺寸單獨設置一個source就足夠了。

  • 最後,img需要繼續設置src,避免舊版瀏覽器無法正確識別srcset屬性。

CSS實現

使用媒體查詢也可以匹配不同解析度的屏幕。

@media (min-resolution: 192dpi) {
    /* 這裡匹配高解析度屏幕 */
}

192dpi是蘋果視網膜屏幕的數據,每英寸屏幕192像素點,超過這個數據的屏幕則認為是高解析度屏幕。

一般會在這裡設置使用較大的圖片,但是目前手機基本都是高解析度屏幕,也會匹配到這裡的大圖片,不太合理。

因此,可以添加媒體查詢的條件:

@media (min-resolution: 192dpi) and (min-width: 600px){
    /* 這裡匹配除了手機以外的高解析度屏幕 */
}

另外,大圖片不僅應用於高解析度屏幕,低解析度屏幕尺寸足夠大時也應該使用大圖片,如下:

@media (min-resolution: 192dpi) and (min-width: 600px),
    (min-width: 2000px){
    /* 這裡匹配除了手機以外的高解析度屏幕,或者尺寸足夠大的低解析度屏幕 */
}

考慮到min-resolution在safari不可用,使用-webkit-min-device-pixel-ratio

@media (min-resolution: 192dpi) and (min-width: 37.5em),
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
    (min-width: 125em){
	...
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ultralytics YOLOv8 基於深度學習和電腦視覺領域的尖端技術,在速度和準確性方面具有無與倫比的性能。其流線型設計使其適用於各種應用,並可輕鬆適應從邊緣設備到雲 API 等不同硬體平臺。YOLOv8 OBB 模型是YOLOv8系列模型最新推出的任意方向的目標檢測模型,可以檢測任意方向的... ...
  • RotateTransform旋轉 RotateTransform表示旋轉一個對象的角度。首先我們來看一下它的定義 public sealed class RotateTransform : Transform { public static readonly DependencyProperty ...
  • 最近做了幾個 WPF + MudBlazor 的小東西,每次從頭搭建環境比較繁瑣,然鵝搭建過程還沒啥技術含量,索性就直接做了個模板,方便以後使用。 1. 介紹 一個用來創建 .NET 8 + WPF + MudBlazor 的項目模板 適用於 VS2022 用法:vs插件市場下載 or 自己通過 G ...
  • 準備 今天學習的Demo是Data Binding中的Linq: 創建一個空白解決方案,然後添加現有項目,選擇Linq,解決方案如下所示: 查看這個Demo的效果: 開始學習這個Demo xaml部分 查看MainWindow.xaml: <Window x:Class="Linq.MainWind ...
  • 我一直有個夢想,就是自己開發App,運行在自己的手機上。但是選什麼語言呢?C#,Java或者其它? 我想,既然我已經用華為的手機,擁有鴻蒙系統,為什麼不嘗試一下鴻蒙開發呢?說乾就乾,找到官網,一步一步操作。首先是裝好開發環境: 按照官方的文檔操作是不難的,但還是遇到一些小問題,node.js的安裝路 ...
  • 摘要: 在開發iOS應用程式時,一個重要的任務是確保應用在不同的屏幕和設備上呈現出良好的用戶體驗。為了實現這一目標,iOS提供了尺寸類別、Auto Layout和Size Classes等強大的工具和技術。 尺寸類別是描述設備屏幕尺寸的屬性,它可以幫助開發者瞭解當前界面所在的設備環境。明確的設備尺寸... ...
  • 全新研發flutter3+dart3+photo_view跨多端仿微信App界面聊天Flutter3-Chat。 flutter3-chat基於最新跨全平臺技術flutter3+dart3+material-design+shared_preferences+easy_refresh構建的仿微信AP ...
  • 一、擴展函數 擴展函數可以方便地給現有類增加屬性和方法而不改動類地代碼。 二、原理 fun String.addTo(s: String): String{ return this + s } 反編譯: @Metadata( mv = {1, 6, 0}, k = 2, d1 = {"\u0000\ ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...