Media Queries 中文翻為『媒體查詢』,作用在偵測輸出裝置,它是由一個媒體類型(media type)與零到多個用於檢查特定條件的媒體功能(media...
「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...
此篇會著重在 Bootstrap 5 響應式的介紹以及使用方法。 RWD 響應式網頁設計 (Responsive Web Design) 簡稱 RWD,為...
Media Query 我覺得已經講到快爛掉了,搭配 Grid 說實在話也沒有很不好做的地方。不過,由於 Grid 是「方格系統」,所以你必須要撇開之前使用 F...
你所不知道的「補白」 首先,你必須要知道這幾個常用屬性的可用值, 屬性 預設值 可用值 justify-content normal flex-s...
內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些...
說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手...
概述 我們再重新複習一下, Grid for layout, Flex for component. 格線系統的發展從 2011 年開始,一直到 2016...
關於文字流 前幾天都提到了關於尺寸的事情,主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷,所謂...
回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HT...
容器 我們先來看 Grid 的容器,他包含了 一張試算表 像是 Table 一樣的東西,為何會說他 像是 Table,我直接舉例給大家看就知道了, .grid...
在練習與找工作中遇到卡關了。沈寂了一些時間,再度回來了。 一份完整的作品集,所需的元素,不外乎 UX/UI 使用者體驗/介面,還包含了許多技術面 HTML5...
網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫...
昨天我們說明了 flex 以直線為排列單位的配置樣式。今天,我們要再來進一步的探討 grid 這種版面樣式。 display: grid; 事實上,grid 的...
簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊...
流 當我們定義好一個 flex 的容器時,昨天有說過了,預設會使用 row 這個設定來定義容器的流向。所以,在容器定義好的當下,我們把基本的容器設定展開來看,另...
↓ 今日學習重點 ↓ 了解 RWD 的概念與常見螢幕尺寸斷點 了解 Media Queries 的使用方法 了解開發 iOS Safari 的注...
區塊 我們在開天闢地的時候,網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...
很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候,你會發現有兩種模式, <table> <tr>...
從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於...
今天來介紹 CSS 的 media query。 前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從...
尺寸 對於 RWD 的設計來說,通常最大的問題點在於,你到底要相容多少尺寸,抑或,到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去? 通常是不會。...
從手機版開始 我們今天來講一個比較古老的排版方式,除了天地之間講幹話之外,中間通常還會有一個靠北邊,或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...
關於自動這件事 我們昨天有提到 dense 這件事情,我們今天繼續腦補一下這個東西該怎麼把玩。首先,先以一個簡單的例子來開場,這是沒有使用 dense 的設定所...
間隔、間隔、間隔 先不囉唆,上圖。 中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定, .grid { display: grid...
Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD...
總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼...
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上,最後來一點大補貼。 justify-content 水平方向的對...
對齊與補白 基本上在格線系統當中,對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了(欸不是)。對齊系列基本上可用的有, 屬...
從手機版開始 昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 ch 為單位的時候,是否需要留意這些尺寸斷點的問題? 要。 所以,我們該怎麼計算這種狀...