本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 R...
何謂響應式網頁，在維基百科上有這樣的定義，響應式網頁(Responsive Web Design，RWD)，是一種網頁設計的技術，這種設計可使網站在不同的裝置（...
Media Query 我覺得已經講到快爛掉了，搭配 Grid 說實在話也沒有很不好做的地方。不過，由於 Grid 是「方格系統」，所以你必須要撇開之前使用 F...
此篇會將響應式斷點設計拆為以下三個部分來介紹。 viewport 尋找容器 設置斷點 viewport 定義：網頁的可視區域，代表使用者能看到的網頁範...
那個行動裝置 雖然我們都概括說是手機版，但 Media Query 其實支援更多裝置的呈現，只是，應該不會有人把 Switch 拿來裝瀏覽器之類的（等等還真的有...
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...
從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況，在那個 .sidebar 屬於...
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ 通常是不會。...
從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ 要。 所以，我們該怎麼計算這種狀...
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度...
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...
從手機版開始 我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...
總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...
關於文字流 前幾天都提到了關於尺寸的事情，主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷，所謂...
關於自動這件事 我們昨天有提到 dense 這件事情，我們今天繼續腦補一下這個東西該怎麼把玩。首先，先以一個簡單的例子來開場，這是沒有使用 dense 的設定所...
對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬...
間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid...
容器 我們先來看 Grid 的容器，他包含了 一張試算表 像是 Table 一樣的東西，為何會說他 像是 Table，我直接舉例給大家看就知道了， .grid...
概述 我們再重新複習一下， Grid for layout, Flex for component. 格線系統的發展從 2011 年開始，一直到 2016...
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 justify-content 水平方向的對...
你所不知道的「補白」 首先，你必須要知道這幾個常用屬性的可用值， 屬性 預設值 可用值 justify-content normal flex-s...
流 當我們定義好一個 flex 的容器時，昨天有說過了，預設會使用 row 這個設定來定義容器的流向。所以，在容器定義好的當下，我們把基本的容器設定展開來看，另...
簡單介紹 雖然說 Flexbox 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程，一定比看我在這邊...
很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式， <table> <tr>...
內容為王 如果以現在的趨勢來看，應該叫「廣告為王」。 當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些...
區塊 我們在開天闢地的時候，網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...
回到未來 網頁在很久很久以前，是使用 HTML 來製作的，約莫過了 20 幾個年頭，現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢，目前來到 HT...
網頁有什麼 粗略上來看，目前市面上瀏覽器打開的那個「畫面」，就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站，最常見的大概就是廣告。上方廣告橫...
Eva Chen
ThisIsFrankTsai
閃光洽
Kent
iThome鐵人賽
看影片追技術