iT邦幫忙

rwd相關文章
共有 67 則文章

技術 菜雞SCSS初體驗

還記得前兩週我都在學習如何手刻RWD網頁,不只有許多的HTML結構要去注意。 就連CSS樣式也希望能使用模組化的方式建構。 總之,就是要讓code不要太冗長不好...

技術 我遇到的RWD網頁難題

上次文章終於迎來續集 我的第一個RWD網頁 這次的網頁練習跟上次的網頁是同系列的,不過這次可是有記起上次的教訓。 也第一次使用了SCSS和GitHub。(這部分...

技術 我的第一個RWD網頁

開始之前先送上菜雞的code 這是我第一次實作RWD的網頁,又因為最近同步在看Bootstrap。 所以起初覺得很簡單,畢竟Bootstrap打一下md或lg,...

鐵人賽 Modern Web DAY 28

技術 【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法

在製作網頁時很常遇到,網站內需要嵌入 Youtube 影片,但影片無法跟隨螢幕尺寸縮放的問題。 通常使用 Youtube 分享功能嵌入的 iframe 原始碼,...

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

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

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

鐵人賽 Modern Web DAY 25

技術 【Day 25】HTML Table Responsive (RWD) 的幾種方法分享

Visual examples of those four possibilities. by CSS-TRICKS 在製作表格時,最常遇到的狀況就是需要在各...

鐵人賽 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-* 屬性值小於等...

技術 4 Musts: To Learn from a Failed Project

Original from here by Billour Ou (1) The beginning of the story…. While...

鐵人賽 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 16
我說那個手機版 系列 第 16

技術 [Day 16] 這不是 Media Query

Media Query 這件事情應該是講到爛掉了,我們稍微複習一下就好, @media (min-width: 32rem) {} 收工(欸)! 爾或者是...

鐵人賽 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 12

技術 【Day 12】網頁設計師的靈感來源,私藏的10個網站收集頁分享!

當一個新的案子進來洽談時,我們通常會在評估階段, 先按照客戶的「產業」和「需求」找一些相應或適合的視覺風格網站。 除了公司本身的作品案例外,也會蒐集一些客戶 /...

鐵人賽 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> <...