Jeff的隨手筆記

學習當一個前端工程師

0%

『新手日記』Day-14 RWD

Posted on In

『新手日記』Day-14 RWD

https://miro.medium.com/max/1400/1*fYdANUx-Fu420wytrrvpHw.jpeg

時間過得真快，多久沒去酒吧喝點小酒放鬆一下了！回歸正題，今天開始要來用練習來代替純理論學習了，昨天稍微排了一下到月底的學習進度安排(AC的自修2–3後端課程、自己在Udemy買的全端課程以及React課程)，保守估計我還需要3週左右才能完成而且每天要約10～12小時的讀書時間…但新教案預計月中會出來，等新教案一出來就要開始預習了，不然很怕跟不上進度。

所以…有阿姨嗎？我不想努力了

今天早上是複習 RWD 理論，下午針對他做練習。下面是我自己依照ＡＣ課程做的筆記

響應式網站設計 (Responsive Web Design)

不同的裝置意謂著不同的螢幕尺寸，在不同的尺寸上，同一組網頁內容必須有不同的呈現方式

RWD 是一種「設計原則」，底下又可以分成不同的流動模式。

Learn Responsive Design

viewport 控制面板

viewport：網頁的可視範圍，也就是瀏覽器裡顯示網頁的區域

Viewport controls 讓你可以模擬網站在特定裝置上呈現的樣子；也可透過直接調整 viewport 大小來測試 RWD。包括以下兩種模式：

Responsive

Google 建議在網站或應用程式開發期間使用 responsive 模式為預設模式。透過位於右方的的尺寸調整把手或在頂部的工具欄，直接調整 viewport 大小去觀察網站的行為。

特定裝置：Galaxy S5、Pixel 2、iPhoneX、iPad 等

接近開發末期，想要進一步改善網站在特定裝置的呈現時，才需要使用特定裝置模式。下拉選單裡提供了最熱門的裝置清單。

實體像素與 PPls

實體像素（或稱硬體像素）：是指螢幕會發光的最小硬度單元。

PPls : 每寸像素（pixels per inch），也就是像素密度，密度越高，肉眼就會感受到更鮮明、更清晰的畫面

螢幕解析度

一個螢幕能容納的實體像素面積。

CSS像素

由全球資訊網 (World Wide Web, 也就是 W3C) 創立的抽象名詞，它是一個無視裝置差別而且等長的測量單位，專門用在網頁開發使用。

曾經實體像素跟CSS素是1:1 ，但隨著時代發展，如今已經失去關聯

設定Viewport

設定 viewport 的目的是告訴瀏覽器 viewport 的寬度以什麼為基準，以及這個寬度和 CSS 之間的比例關係。

1
2
//在HTML 的 <head> 加入
<meta name="viewport" content="width=device-width, initial-scale=1">

使用 <meta name="viewport">標籤並帶入以下兩個屬性：

width=device-width 調整內容寬度為裝置寬度；

如果寫 width=320px，那麼當螢幕尺寸改變時，viewport 的寬度都仍然是 320px，如下圖：

https://miro.medium.com/max/1400/1*IAqsukLDndXDySbvCAmA2g.png

當螢幕寬度變大時，為了維持寬度為 320px，內容就被拉大了，這是我們不想要看到的結果。

為了達成 RWD 與好的用戶體驗，建議把 viewport 寬度設定為 width=device-width，這樣會讓網頁內容與裝置螢幕寬度一致。

initial-scale=1 設定「CSS 像素」和「裝置像素」的比例為 1:1。

ＭＤＮ解釋：Controls the zoom level when the page is first loaded. Minimum: . Maximum: . Default:. Negative values: ignored.

設定畫面的初始縮放比例

Viewport 屬性說明

當然Viewport 還有其他屬性，以下是其他會用到的屬性：

https://miro.medium.com/max/876/1*qgic1MeoudxonnAZ5ROHKg.png

製作 RWD 的基本動作

  • 定義預設的 viewport 尺寸
  • 使用 CSS 媒體查詢 (media queries)ㄥ
  • 設定分界點 (breakpoint)

Mobile First

首先強調，在思考 RWD 設計時，應該先從最小螢幕尺寸開始考慮，也就是手機。

小螢幕能顯示的內容比較少，而且在較小的螢幕上能運用的佈局有限，因此它應該優先被考慮。先做出迎合最小螢幕的網站內容，再慢慢思考當螢幕變大時，可以追加什麼網站內容。

https://miro.medium.com/max/1400/1*nLHJu59YlwOX06wD_jwhRw.png

💡 Mobile First 的焦點是「網站內容如何逐漸變多」，而不是單純把同一套內容塞進不同尺寸

Breakpoint

當尺寸改變時，網頁佈局發生了顯著的變化，這些尺寸的界線叫做 breakpoint，也就是 CSS 樣式轉換的發生點。

https://miro.medium.com/max/1400/1*FmPoZAMqKGyqwEV71Wl2Iw.png

每設一個 breakpoint 意味需要準備多一份 CSS 樣式，要抓得多細是看設計的需求，稍後會介紹對應的語法。

除了上述幾個在設備間切換的主要分界點 (major breakpoint)，也會設定次要分界點 (minor breakpoint) 來調整比較細微的 CSS 變化，像是元素的邊距、避免文字超過頁面寬度，或是調整圖片尺寸。

Media Queries

💡 媒體查詢使用@media關鍵字（CSS 規則）啟動，可用於各種用例。

要瞭解 media queries，需要先從 CSS 的 media 屬性開始。

CSS2 推出 media 屬性時，還沒有進入行動優先的時代，只是單純想把在螢幕上看網頁的情境，和列印的情境區隔開來，在前者顯示較小的字體，而在列印時顯示較大的字體。

例如以下引入了三支樣式表，並透過 media 指派給不同的裝置，依序為所有裝置 (all)、螢幕 (screen)、印表機 (print)：

1
2
3
4
5
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />@media (max-width: 600px) {...//styles}
@media screen and (max-width: 600px) {...//styles}
@media screen and (min-width: 600px) and (max-width: 1000px) {...//styles}

第一組設定沒有公布 media type，所以會預設成 all，但有設定 media feature 為「最大寬度為 600px」，也就是寫在 {} 內的設定只有在寬度小於 600px 時才會生效。

在開發網頁時，通常會直接把 media type 被設為 screen。

使用條件查詢的作法比較有彈性，因為我們可以設定不同的 breakpoint，根據不同的狀況來載入 CSS 設定，因此能達成「回應不同的寬度」。

https://miro.medium.com/max/1400/1*goZ4RaF2QtCTc9i5F-iOwg.png

你可以在 media feature 裡使用 and、or或 not等運算子，使用方法和程式語言相同，只要條件為 true，就會繼續執行。

💡 剛剛我們談到了「行動優先」的原則，在此原則指導下，當你要開始分流時，應該先針對較小的尺寸來設定

｜單位

百分比

最常用的相對單位就是百分比 (%) 了，使用百分比，這樣在 viewport 尺寸改變時，元素才能與 viewport 同時動態縮放。

https://miro.medium.com/max/1400/1*pLT5EAsOzpQwL6J1ATAlDA.png

絕對單位

你會常常需要換算絕對單位與相對單位，換算公式為：target ÷ context = result

  • target — 原本的絕對單位
  • context — 父元素的單位
  • result — 百分比

https://miro.medium.com/max/1400/1*oLlgM4AnxQ8jJ00GOSyArw.png

viewport 相對單位

  • *viewport 百分比長度 (viewport percentage lengths)**是很方便的單位，這些單位會隨著 viewport 尺寸一同縮放：
  • vw - 對應到 width of viewport 的比例
  • vh - 對應到 height of viewport 的比例
  • vmin - 等於 vw 或 vh 較小的值
  • vmax - 等於 vw 或 vh 較大的值，

若 viewport 的寬是 1200 像素，且 viewport 的高是 900 像素時：

1vw 會等於 viewport 寬度的 1%，也就是 12 像素。

這裡寬比高的值大，也就是說 vw 比 vh 大，所以 1vmax ＝ 1vw 的大小，。

字體相對單位

em 用於文字大小，以父元素的 font-size 為基準

例如，父元素的字體大小為 16px，子元素設定 1em等同於設定成 16 像素；

限制彈性

當內容不適合變得太大或太小，因此你會使用 min-width、max-width、min-height和 max-height等屬性來控制邊界值。

1
2
3
4
img {
  width: 100%;
  max-width: 960px;
}

通常我們會把網站內容整個包在 container (或稱 wrapper) 裡，以便讓內容置中，這個 container 通常會設定成 width: 100%（暫時可理解為與 <body>同寬），但當 container 延展開來時，一行文字就會被拉得超長，反而造成不好的閱讀體驗。

1
2
3
4
.container {
  width: 90%;
  max-width: 960px;
}

至於 min-width，則有可能在表單裡使用，不管 width 的值設成多少，它們都不會小於 min-width 設定的值。

｜設計模式：局部流動 (Mostly Fluid)

定義 Flexbox 架構

根據目前的 HTML 結構，我們可以定義出一層 flexbox 的 container-item 架構：

https://miro.medium.com/max/1400/1*F6VhOs3MhqD7mF4__wL3Sg.png

1
2
3
4
.wrapper {
  display: flex;
  flex-flow: row wrap;
}

flex-flow: row wrap;會讓 flex item 與 flex container 同步調整大小，讓 item 與 container 之間不會有溢出邊界 (overflow) 的問題。

設置 breakpoint

根據 Mobile First 的原則，從最小的 viewport 開始，逐漸設計較大的 viewport 佈局。

💡 line-height顧名思義就是文字的單行高度，單行文字垂直置中的技巧

CSS垂直置中技巧，我只會23個，你會幾個

設計模式：細微調整 (Tiny Tweaks)

px<>em轉換器

PX to EM Conversion

  1. line-height(行高)，一般為1.5em，或字體大小1.5倍。
  2. paragraph(段落)，一般為2em。
  3. letter-spacing(文字間距)，一般為0.12em，所以實作在手機版(mobile-first) ，屬性.description內文先統一設定，行高和文字間距，讓網頁在各種RWD提升一點易讀性。字體大小依據個容器和寬度，自行用相對單位(rem)，用倍率逐步放大。

快要不知道可以分享什麼了，我需要好好思考一下接下來的主題。