Responsive design(譯)

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

響應式網頁設計(RWD)是一種網頁設計方法,使網頁在所有屏幕尺寸和分辨率下都能很好地呈現,同時確保良好的可用性。這是設計多設備網絡的一種方式。在本文中,我們將幫助您瞭解一些可以用來掌握它的技術。

HTML基本上是響應性的,或者說流暢的。如果你創建了一個只包含HTML而沒有CSS的網頁,並且調整了窗口的大小,瀏覽器會自動重新流進文本以適應視窗。

雖然默認的響應行爲可能聽起來不需要解決方案,但在寬顯示器上全屏顯示的長行文本可能很難閱讀。如果使用CSS減少寬屏幕行長度,例如通過創建列或添加顯著的填充,那麼對於縮小瀏覽器窗口或在移動設備上打開站點的用戶來說,站點可能看起來很擠。

通過設置固定寬度來創建一個不可調整大小的網頁也不起作用;這導致窄屏設備上出現滾動條,寬屏屏幕上出現太多空白空間。

響應式網頁設計(Responsive web design,簡稱RWD)是一種針對各種設備和設備尺寸的設計方法,無論內容是在平板電腦、手機、電視還是手錶上觀看,都能自動適應屏幕。

響應式網頁設計不是一項獨立的技術——它是一種方法。它是一個術語,用於描述一組最佳實踐,用於創建可以響應用於查看內容的任何設備的佈局。

響應式設計這個術語是由Ethan Marcotte在2010年創造的,描述了使用流體網格、流體圖像和媒體查詢來創建響應式內容,正如Zoe Mickley Gillenwater在《靈活的網頁設計》一書中所討論的那樣。

當時,建議使用CSS浮動進行佈局,並使用媒體查詢來查詢瀏覽器寬度,爲不同的斷點創建佈局。將流體圖像設置爲不超過其容器的寬度;它們的max-width屬性設置爲100%。當包含的列變窄時,流體圖像會縮小,但當列增大時,流體圖像不會大於其固有大小。這使圖像能夠縮小以適合其內容,而不是溢出它,但如果容器變得比圖像更寬,則不會變得更大或像素化。

現代CSS佈局方法本質上是響應式的,而且,自從Gillenwater的書和Marcotte的文章出版以來,我們在web平臺中內置了大量的功能,使設計響應式網站變得更加容易。

本文的其餘部分將向您介紹在創建響應式站點時可能需要使用的各種web平臺特性。

Media Queries

媒體查詢允許我們運行一系列的測試(例如,用戶的屏幕是否大於一定的寬度,或一定的分辨率),並有選擇地應用CSS來爲用戶的需要適當地設置頁面樣式。

例如,下面的媒體查詢測試當前網頁是否顯示爲屏幕媒體(因此不是打印文檔),並且視口寬度至少爲80rem。container選擇器的CSS只會在這兩點爲真時纔會被應用。

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

您可以在樣式表中添加多個媒體查詢,調整整個佈局或部分佈局以最適合各種屏幕尺寸。引入媒體查詢並更改佈局的點稱爲斷點(breakpoints)。

使用Media Queries的一個常見方法是爲窄屏幕設備(例如手機)創建一個簡單的單列布局,然後檢查更寬的屏幕,當你知道你有足夠的屏幕寬度來處理它時,實現一個多列布局。移動優先設計被稱爲mobile first設計。

如果使用斷點,最佳實踐鼓勵使用相對單位而不是單個設備的絕對大小來定義媒體查詢斷點。

在媒體查詢塊中定義的樣式有不同的方法;從使用媒體查詢到基於瀏覽器大小範圍的<link>樣式表,到僅包含自定義屬性變量來存儲與每個斷點關聯的值。

在媒體查詢的MDN文檔中找到更多信息。

媒體查詢可以幫助RWD,但不是必需的。可以使用靈活的網格、相對單位以及最小和最大單位值,而無需查詢。

Responsive layout technologies

響應式網站建立在靈活的網格上,這意味着你不需要用像素級的完美佈局來瞄準每一個可能的設備尺寸。

通過使用靈活的網格,您可以更改功能或添加斷點,並在內容開始看起來不好的地方更改設計。例如,爲了確保行長度不會隨着屏幕尺寸的增加而變得不可讀,你可以使用列;如果一個框在縮小時每行都有兩個單詞,那麼可以設置一個斷點。

幾種佈局方法,包括多列布局、Flexbox和Grid,默認情況下是響應式的。它們都假定您正在嘗試創建一個靈活的網格,併爲您提供更簡單的方法。

Multicol

使用multicol,您可以指定列數,以指示您希望將內容分割成的最大列數。然後瀏覽器計算出這些元素的大小,這個大小會根據屏幕的大小而變化。

.container {
  column-count: 3;
}

如果指定列寬度,則指定的是最小寬度。瀏覽器將創建儘可能多的寬度的列,以適應容器,然後在所有列之間共享剩餘的空間。因此,列的數量將根據有多少空間而變化。

.container {
  column-width: 10em;
}

您可以使用列簡寫來提供最大列數和最小列寬度。這可以確保行長度不會隨着屏幕尺寸的增大而變得不可讀,也不會隨着屏幕尺寸的減小而變得太窄。

Flexbox

在Flexbox中,伸縮項收縮或增長,根據其容器中的空間在項目之間分配空間。通過更改flex-grow和flex-shrink的值,您可以指示項目在遇到更多或更少的空間時的行爲。

在下面的示例中,每個伸縮項將在伸縮容器中佔用等量的空間,使用flex: 1的簡寫,如佈局主題Flexbox:靈活調整伸縮項的大小。

.container {
  display: flex;
}

.item {
  flex: 1;
}

CSS grid

在CSS網格佈局中,fr單元允許在網格軌道上分配可用空間。下一個示例創建一個網格容器,其中三個軌道的大小爲1fr。這將創建三個列軌道,每個列軌道佔用容器中可用空間的一部分。您可以在“學習佈局網格”主題的“靈活網格”單元下找到有關這種創建網格方法的更多信息。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Responsive images

要確保媒體不會大於其響應容器,可以使用以下方法:

img,
picture,
video {
  max-width: 100%;
}

這可以擴展介質,以確保它們不會溢出容器。使用單個大圖像並將其縮小以適應小型設備,因爲下載的圖像比所需的大,這會浪費帶寬。

響應式圖像,使用<picture>元素和<img> srcset和sizes屬性,可以提供針對用戶視口和設備分辨率的圖像。例如,您可以在移動設備上包含方形圖像,但在桌面上顯示與景觀圖像相同的場景。

<picture>元素允許提供多種尺寸以及“提示”(描述圖像最適合的屏幕尺寸和分辨率的元數據),瀏覽器將爲每個設備選擇最合適的圖像,確保用戶將下載適合他們正在使用的設備的圖像大小。使用<picture>和max-width消除了使用媒體查詢調整圖像大小的需要。它可以將不同長寬比的圖像定位到不同的視口大小。

您還可以直接使用不同尺寸的圖像,從而爲不同的屏幕尺寸提供不同的裁剪或完全不同的圖像。

您可以在MDN的學習HTML部分找到響應式圖像的詳細指南。

Responsive typography

響應式排版描述了在媒體查詢中更改字體大小,或使用視口單位來反映更少或更大的屏幕實際面積。

Using media queries for responsive typography

在這個例子中,我們想要將第一層標題設置爲4rem,這意味着它將是基礎字體大小的四倍。標題太大了!我們只希望這個巨型標題在更大的屏幕尺寸上,因此我們首先創建一個較小的標題,然後使用媒體查詢用更大的尺寸覆蓋它,如果我們知道用戶的屏幕尺寸至少爲1200px。

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

我們已經編輯了上面的響應式網格示例,使用概述的方法也包括響應式類型。您可以看到,當佈局變爲兩列版本時,標題是如何改變大小的。

在移動設備上,標題更小:

然而,在桌面上,我們看到更大的標題尺寸:

正如這種排版方法所示,您不需要將媒體查詢限制爲僅更改頁面的佈局。它們可以用來調整任何元素,使其在不同的屏幕尺寸上更可用或更有吸引力。

Using viewport units for responsive typography

Viewport units vw也可以用來啓用響應式排版,而不需要在媒體查詢中設置斷點。1vw等於視口寬度的百分之一,這意味着如果你使用vw設置字體大小,它將始終與視口的大小相關。

h1 {
  font-size: 6vw;
}

這樣做的問題是,用戶失去了使用vw單位縮放任何文本集的能力,因爲文本總是與視口的大小相關。因此,你不應該單獨使用視口單位設置文本。

有一個解決方案,它涉及到使用calc()。如果你將vw單位添加到使用固定大小(如ems或rems)的值集中,則文本仍然可以縮放。從本質上講,大衆的單位增加了放大後的價值:

h1 {
  font-size: calc(1.5rem + 3vw);
}

這意味着我們只需要爲標題指定一次字體大小,而不是爲移動設備設置它並在媒體查詢中重新定義它。當你增加視口的大小時,字體會逐漸增加。

The viewport meta tag

如果您查看響應頁面的HTML源代碼,您通常會在文檔的<head>中看到以下<meta>標記。

<meta name="viewport" content="width=device-width,initial-scale=1" />

這個視口元標籤告訴移動瀏覽器,他們應該將視口的寬度設置爲設備寬度,並將文檔縮放到其預期大小的100%,這將以您期望的移動優化大小顯示文檔。

爲什麼需要這樣做?因爲移動瀏覽器傾向於謊報其視口寬度。

這個元標籤的存在是因爲當智能手機首次出現時,大多數網站都沒有進行移動優化。因此,移動瀏覽器將視口寬度設置爲980像素,以該寬度呈現頁面,並將結果顯示爲桌面佈局的縮小版本。用戶可以放大和移動網站以查看他們感興趣的部分,但它看起來很糟糕。

通過設置width=device-width,你可以用設備的實際寬度覆蓋移動設備的默認值,比如蘋果的默認寬度=980px。如果沒有它,你的帶有斷點和媒體查詢的響應式設計可能無法在移動瀏覽器上正常工作。如果你的窄屏佈局的視口寬度爲480像素或更小,但設備顯示它的寬度爲980像素,那麼用戶將不會看到你的窄屏佈局。

因此,您應該始終在文檔的頭部包含viewport元標記。

Summary

響應式設計指的是一個站點或應用程序的設計,它對其所處的環境做出響應。它包含了許多CSS和HTML的特性和技術,現在基本上就是我們默認構建網站的方式。考慮一下你在手機上訪問的網站——可能很少會遇到桌面版本縮小的網站,或者你需要橫向滾動才能找到東西的網站。這是因爲網絡已經轉向了這種響應式設計方法。

在您在這些課程中學到的佈局方法的幫助下,實現響應式設計也變得更加容易。如果你是web開發的新手,那麼比起響應式設計的早期,你可以使用更多的工具。因此,檢查您使用的任何材料的年齡都是值得的。雖然歷史上的文章仍然有用,但CSS和HTML的現代使用使創建優雅和有用的設計變得更加容易,無論訪問者使用什麼設備訪問網站。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章