透過控制 p margin:5px auto; 調整文字上下間距透過 @media screen and (max-width: @media screen...
Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} 收工（欸）！ 爾或者是...
自序 大家好，我是來自中山大學的Jerry，接觸javascript大約三年了，雖然不像業界的各路大神日夜專研，不過熬夜爆肝寫code的日子也是不少，可以參考最...
哈囉～很快的已經來到了第九天，前面帶給大家都是一些網頁的基礎，後面會針對各種主題有更深入的探討喔，今天要介紹的是響應式設計的設計重點，也是電商網站很需要重視的一...
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ 通常是不會。...
除了昨天提到的media query可以做出響應式網頁之外，今天介紹的Bootstrap 5.1版本也能快速上手，更輕鬆的做出排版喔！ Containers 容...
從手機版開始 我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...
關於自動這件事 我們昨天有提到 dense 這件事情，我們今天繼續腦補一下這個東西該怎麼把玩。首先，先以一個簡單的例子來開場，這是沒有使用 dense 的設定所...
間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid...
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...
總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 justify-content 水平方向的對...
不知道為甚麼，旁邊無緣無故多了一條空白區域，但那個區域根本沒有其他元件程式碼好像也不知道該貼哪段，求各位IT大大幫幫忙解惑!! 有需要補充程式碼 我附上gith...
對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬...
這禮拜因為小孩公托有腸病毒，加上工作繁忙，這兩天真是超級累，除了把握時間來看一下技術社團與看書外，已無暇寫程式，這幾天太太跟我說她上班的地方所製作的網頁很不好用...
從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ 要。 所以，我們該怎麼計算這種狀...
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等...
一、何謂RWD響應式網頁設計(Responsive web design,RWD)是一種網頁設計的概念，由Ethan Marcotte於2010年時提出此，透過...
以此為模版將需要的內容圖片填進去 <!DOCTYPE html> <html> <head> <meta name=&...
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度...
How do RWD control columns displaying on devices of different pixels ? First of...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨，大家好 ! 我是阿蘇今天是Day24 ，今天分享的是 以 Boostrap 為核...
製作簡單點選切換互動，搭配Bootstrap就能輕鬆有RWD的效果呦！此範例需引用Bootstrap, fontawesome, jQuery呦。 原頁面比例...
網頁大小版要怎麼規劃呢？在設計稿階段，因為過去工作的關係，比較習慣提桌機版及手機版兩個尺寸。但進入切版階段後，就必須實現每個尺寸下畫面都是符合需求的，所以我會利...
你想要一個可以用的網站還是想要一個可以排名的SEO網站，為企業品牌帶來實質的效益呢？在建立官網前，你可以想想建網站的目的是什麼？而架設SEO網站需要用什麼方式進...
前言 經過從設計到後端的細緻實作後，我們現在進入了至關重要的前端實作階段。在這個階段，我們不僅要將畫面與資料結合，更要為我們的應用程式注入靈魂。前端不僅僅是視覺...
昨天有介紹 Aspect Ratio 運用在 RWD 排版相當的方便 如下圖是旅遊類型的卡片 卡片排列四欄，卡片寬度會隨著螢幕寬度做變化，就很適合使用 Aspe...
Original from here by Billour Ou(1) The beginning of the story…. While f...
閃光洽
jerrythepotato
atain880625
Tim Hsu
鴻勳
Vida Lin
阿蘇蘇
Alice CH
luna0228
ysl0628
indexhui
iThome鐵人賽
看影片追技術