How do RWD control columns displaying on devices of different pixels ? First of...
自序 大家好，我是來自中山大學的Jerry，接觸javascript大約三年了，雖然不像業界的各路大神日夜專研，不過熬夜爆肝寫code的日子也是不少，可以參考最...
What is RWD? “Responsive web design (RWD) is a design and technical approach tha...
現在越來越多種類的裝置出現，包括電腦、平板、手機，我們會在不同大小的螢幕上瀏覽網頁，究竟網頁要如何在所有設備上，都能顯示適合該裝置的排版模式？在過去會根據裝置來...
不知道為甚麼，旁邊無緣無故多了一條空白區域，但那個區域根本沒有其他元件程式碼好像也不知道該貼哪段，求各位IT大大幫幫忙解惑!! 有需要補充程式碼 我附上gith...
還記得前兩週我都在學習如何手刻RWD網頁，不只有許多的HTML結構要去注意。就連CSS樣式也希望能使用模組化的方式建構。總之，就是要讓code不要太冗長不好管理...
上次文章終於迎來續集 我的第一個RWD網頁 這次的網頁練習跟上次的網頁是同系列的，不過這次可是有記起上次的教訓。也第一次使用了SCSS和GitHub。（這部分之...
開始之前先送上菜雞的code 這是我第一次實作ＲＷＤ的網頁，又因為最近同步在看Bootstrap。所以起初覺得很簡單，畢竟Bootstrap打一下md或lg，好...
在製作網頁時很常遇到，網站內需要嵌入 Youtube 影片，但影片無法跟隨螢幕尺寸縮放的問題。通常使用 Youtube 分享功能嵌入的 iframe 原始碼，已...
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...
從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況，在那個 .sidebar 屬於...
Visual examples of those four possibilities. by CSS-TRICKS 在製作表格時，最常遇到的狀況就是需要在各種...
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...
Original from here by Billour Ou(1) The beginning of the story…. While f...
尺寸 對於 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...
Vida Lin
jerrythepotato
May
GG
閃光洽
iThome鐵人賽
看影片追技術