還記得前兩週我都在學習如何手刻RWD網頁，不只有許多的HTML結構要去注意。 就連CSS樣式也希望能使用模組化的方式建構。 總之，就是要讓code不要太冗長不好...
上次文章終於迎來續集 我的第一個RWD網頁 這次的網頁練習跟上次的網頁是同系列的，不過這次可是有記起上次的教訓。 也第一次使用了SCSS和GitHub。（這部分...
開始之前先送上菜雞的code 這是我第一次實作ＲＷＤ的網頁，又因為最近同步在看Bootstrap。 所以起初覺得很簡單，畢竟Bootstrap打一下md或lg，...
在製作網頁時很常遇到，網站內需要嵌入 Youtube 影片，但影片無法跟隨螢幕尺寸縮放的問題。 通常使用 Youtube 分享功能嵌入的 iframe 原始碼，...
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...
Visual examples of those four possibilities. by CSS-TRICKS 在製作表格時，最常遇到的狀況就是需要在各...
從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況，在那個 .sidebar 屬於...
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...
Original from here by Billour Ou (1) The beginning of the story…. While...
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ 通常是不會。...
從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ 要。 所以，我們該怎麼計算這種狀...
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度...
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...
從手機版開始 我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...
總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...
Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} 收工（欸）！ 爾或者是...
關於自動這件事 我們昨天有提到 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>...
內容為王 如果以現在的趨勢來看，應該叫「廣告為王」。 當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些...
GG
閃光洽
iT 邦幫忙鐵人賽