iT邦幫忙

media query相關文章
共有 32 則文章
鐵人賽 Modern Web DAY 30
我說那個手機版 系列 第 30

技術 [Day 30] 最後的行動裝置

那個行動裝置 雖然我們都概括說是手機版,但 Media Query 其實支援更多裝置的呈現,只是,應該不會有人把 Switch 拿來裝瀏覽器之類的(等等還真的有...

鐵人賽 Modern Web DAY 27
我說那個手機版 系列 第 27

技術 [Day 27] 所以說那個手機版

Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD...

鐵人賽 Modern Web DAY 26
我說那個手機版 系列 第 26

技術 [Day 26] RWD 的難題 Part 3

從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於...

鐵人賽 Modern Web DAY 25
我說那個手機版 系列 第 25

技術 [Day 25] RWD 的難題 Part 2

尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭,這個之前就提到過了, min-* 屬性值大於等於。 max-* 屬性值小於等...

鐵人賽 Modern Web DAY 24
我說那個手機版 系列 第 24

技術 [Day 24] RWD 的難題 Part 1

尺寸 對於 RWD 的設計來說,通常最大的問題點在於,你到底要相容多少尺寸,抑或,到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去? 通常是不會。...

鐵人賽 Modern Web DAY 23
我說那個手機版 系列 第 23

技術 [Day 23] 實際操作 Part 5

從手機版開始 昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 ch 為單位的時候,是否需要留意這些尺寸斷點的問題? 要。 所以,我們該怎麼計算這種狀...

鐵人賽 Modern Web DAY 22
我說那個手機版 系列 第 22

技術 [Day 22] 實際操作 Part 4

從手機版開始 還記得昨天的狀況嗎?那個 33% 為何會發生這樣的事情?這件事情在小尺寸基本上一定會發生,就端看你剩下的 1% 是不是跟 grid-gap 的寬度...

鐵人賽 Modern Web DAY 21
我說那個手機版 系列 第 21

技術 [Day 21] 實際操作 Part 3

從手機版開始 好的,今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器,所以這邊我們會準備一些內容,大...

鐵人賽 Modern Web DAY 20
我說那個手機版 系列 第 20

技術 [Day 20] 實際操作 Part 2

從手機版開始 在我們開始講內文之前,我們先來看看天地之間的事情。在昨天的例子中,你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...

鐵人賽 Modern Web DAY 19
我說那個手機版 系列 第 19

技術 [Day 19] 實際操作 Part 1

從手機版開始 我們今天來講一個比較古老的排版方式,除了天地之間講幹話之外,中間通常還會有一個靠北邊,或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...

鐵人賽 Modern Web DAY 18
我說那個手機版 系列 第 18

技術 [Day 18] 模糊地帶

總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...

鐵人賽 Modern Web DAY 17
我說那個手機版 系列 第 17

技術 [Day 17] 這不是 font-size

關於文字流 前幾天都提到了關於尺寸的事情,主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷,所謂...

鐵人賽 Modern Web DAY 15
我說那個手機版 系列 第 15

技術 [Day 15] Grid 格線系統 Part 5

關於自動這件事 我們昨天有提到 dense 這件事情,我們今天繼續腦補一下這個東西該怎麼把玩。首先,先以一個簡單的例子來開場,這是沒有使用 dense 的設定所...

鐵人賽 Modern Web DAY 14
我說那個手機版 系列 第 14

技術 [Day 14] Grid 格線系統 Part 4

對齊與補白 基本上在格線系統當中,對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了(欸不是)。對齊系列基本上可用的有, 屬...

鐵人賽 Modern Web DAY 13
我說那個手機版 系列 第 13

技術 [Day 13] Grid 格線系統 Part 3

間隔、間隔、間隔 先不囉唆,上圖。 中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定, .grid { display: grid...

鐵人賽 Modern Web DAY 12
我說那個手機版 系列 第 12

技術 [Day 12] Grid 格線系統 Part 2

容器 我們先來看 Grid 的容器,他包含了 一張試算表 像是 Table 一樣的東西,為何會說他 像是 Table,我直接舉例給大家看就知道了, .grid...

鐵人賽 Modern Web DAY 11
我說那個手機版 系列 第 11

技術 [Day 11] Grid 格線系統 Part 1

概述 我們再重新複習一下, Grid for layout, Flex for component. 格線系統的發展從 2011 年開始,一直到 2016...

鐵人賽 Modern Web DAY 10
我說那個手機版 系列 第 10

技術 [Day 10] Flexbox 的使用姿勢 Part 4

各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上,最後來一點大補貼。 justify-content 水平方向的對...

鐵人賽 Modern Web DAY 9
我說那個手機版 系列 第 9

技術 [Day 9] Flexbox 的使用姿勢 Part 3

你所不知道的「補白」 首先,你必須要知道這幾個常用屬性的可用值, 屬性 預設值 可用值 justify-content normal flex-s...

鐵人賽 Modern Web DAY 8
我說那個手機版 系列 第 8

技術 [Day 8] Flexbox 的使用姿勢 Part 2

流 當我們定義好一個 flex 的容器時,昨天有說過了,預設會使用 row 這個設定來定義容器的流向。所以,在容器定義好的當下,我們把基本的容器設定展開來看,另...

鐵人賽 Modern Web DAY 7
我說那個手機版 系列 第 7

技術 [Day 7] Flexbox 的使用姿勢 Part 1

簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊...

鐵人賽 Modern Web DAY 6
我說那個手機版 系列 第 6

技術 [Day 6] 從響應式的那個東西說起

很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候,你會發現有兩種模式, <table> <tr>...

鐵人賽 Modern Web DAY 5
我說那個手機版 系列 第 5

技術 [Day 5] 從內容開始看格線系統

內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些...

鐵人賽 Modern Web DAY 4
我說那個手機版 系列 第 4

技術 [Day 4] 給我一個 Box

區塊 我們在開天闢地的時候,網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...

鐵人賽 Modern Web DAY 3
我說那個手機版 系列 第 3

技術 [Day 3] 我是誰,我在哪裡

回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HT...

鐵人賽 Modern Web DAY 2
我說那個手機版 系列 第 2

技術 [Day 2] 那個網頁設計

網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫...

鐵人賽 Modern Web DAY 1
我說那個手機版 系列 第 1

技術 [Day 1] 我說那個手機版

說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手...

鐵人賽 自我挑戰組 DAY 9

技術 Day 9 用 WordPress 看 CSS 樣式:版面配置 (grid 與 @media)

昨天我們說明了 flex 以直線為排列單位的配置樣式。今天,我們要再來進一步的探討 grid 這種版面樣式。 display: grid; 事實上,grid 的...

技術 [鼠年全馬鐵人挑戰] Week 3-網頁排版筆記: 一份完整的作品所需要的元素

在練習與找工作中遇到卡關了。沈寂了一些時間,再度回來了。 一份完整的作品集,所需的元素,不外乎 UX/UI 使用者體驗/介面,還包含了許多技術面 HTML5...

鐵人賽 Modern Web DAY 12
重新認識 CSS 系列 第 12

技術 重新認識 CSS - Media query

今天來介紹 CSS 的 media query。 前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從...