區塊 我們在開天闢地的時候，網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ 通常是不會。...
Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} 收工（欸）！ 爾或者是...
What is RWD? “Responsive web design (RWD) is a design and technical approach tha...
很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式， <table> <tr>...
自序 大家好，我是來自中山大學的Jerry，接觸javascript大約三年了，雖然不像業界的各路大神日夜專研，不過熬夜爆肝寫code的日子也是不少，可以參考最...
除了昨天提到的media query可以做出響應式網頁之外，今天介紹的Bootstrap 5.1版本也能快速上手，更輕鬆的做出排版喔！ Containers 容...
間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid...
透過控制 p margin:5px auto; 調整文字上下間距透過 @media screen and (max-width: @media screen...
哈囉～很快的已經來到了第九天，前面帶給大家都是一些網頁的基礎，後面會針對各種主題有更深入的探討喔，今天要介紹的是響應式設計的設計重點，也是電商網站很需要重視的一...
以最簡為原則 本文將介紹如何以簡單的設計實現響應式布局（RWD），兼顧桌面與移動端需求，並比較 React 和 Vue 的不同實作方式。 "左圖展...
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 justify-content 水平方向的對...
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...
從手機版開始 我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...
對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬...
關於自動這件事 我們昨天有提到 dense 這件事情，我們今天繼續腦補一下這個東西該怎麼把玩。首先，先以一個簡單的例子來開場，這是沒有使用 dense 的設定所...
從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ 要。 所以，我們該怎麼計算這種狀...
總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...
擷自 digitalsynopsis.com 在前面的篇章中，我們學習了如何撰寫CSS的各個屬性來設計出精美的網頁，但您是否有想過：「用電腦設計出來的網頁，為...
影片教學 程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head>...
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...
How do RWD control columns displaying on devices of different pixels ? First of...
這禮拜因為小孩公托有腸病毒，加上工作繁忙，這兩天真是超級累，除了把握時間來看一下技術社團與看書外，已無暇寫程式，這幾天太太跟我說她上班的地方所製作的網頁很不好用...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨，大家好 ! 我是阿蘇今天是Day24 ，今天分享的是 以 Boostrap 為核...
不知道為甚麼，旁邊無緣無故多了一條空白區域，但那個區域根本沒有其他元件程式碼好像也不知道該貼哪段，求各位IT大大幫幫忙解惑!! 有需要補充程式碼 我附上gith...
以此為模版將需要的內容圖片填進去 <!DOCTYPE html> <html> <head> <meta name=&...
影片教學 程式碼回顧 <!DOCTYPE html> <html lang="en"> <head>...
你想要一個可以用的網站還是想要一個可以排名的SEO網站，為企業品牌帶來實質的效益呢？在建立官網前，你可以想想建網站的目的是什麼？而架設SEO網站需要用什麼方式進...
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...
閃光洽
Vida Lin
jerrythepotato
atain880625
ttdragon0722
coding19
Tim Hsu
阿蘇蘇
iThome鐵人賽
看影片追技術