在過去的幾篇文章中，我們探討了 Hero Section 的設計和優化，包括使用 SVG 和動態控制來增強頁面交互效果。今天，我們將進一步完成個人網站的服務展示...
在前幾篇文章中，我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而，隨著使用者透過不同裝置訪問網站，響應式設計已成為現...
以最簡為原則 本文將介紹如何以簡單的設計實現響應式布局（RWD），兼顧桌面與移動端需求，並比較 React 和 Vue 的不同實作方式。 "左圖展...
你想要一個可以用的網站還是想要一個可以排名的SEO網站，為企業品牌帶來實質的效益呢？在建立官網前，你可以想想建網站的目的是什麼？而架設SEO網站需要用什麼方式進...
影片教學 程式碼回顧 <!DOCTYPE html> <html lang="en"> <head>...
影片教學 程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head>...
Responsive Web Design 簡稱(RWD)是一種網頁設計方法，目的是讓網頁在不同裝置和螢幕尺寸上都能提供最佳的版面配置。->使用CSS3的...
Responsive web design (RWD) 響應式網頁設計 是種解決『裝置範圍』和『裝置尺寸』的設計方法，無論內容是在平板電腦、手機、電視或手錶上查...
前言 經過從設計到後端的細緻實作後，我們現在進入了至關重要的前端實作階段。在這個階段，我們不僅要將畫面與資料結合，更要為我們的應用程式注入靈魂。前端不僅僅是視覺...
今天要談實際用CSS調整實現RWD製作。再開始聊RWD製作前，可以先回去複習前面這兩部分，有很大的關聯～Day13-16. 切版前知識-CSSDay17-18....
網頁大小版要怎麼規劃呢？在設計稿階段，因為過去工作的關係，比較習慣提桌機版及手機版兩個尺寸。但進入切版階段後，就必須實現每個尺寸下畫面都是符合需求的，所以我會利...
由於每個裝置的長寬不一樣，所以造成我們在拖拉放大縮小我們的頁面的時候，我們的圖片大小無法完全的match。這時候我們可以寫以下的code達成我們的目的， .he...
今天要來說說RWD響應式網頁，應該大部分的人都有聽過或知道RWD這個名稱，他是現在網頁設計趨勢最基本需要具備的設計原則，幾乎可以說近年來的網站都會實現RWD或大...
何謂響應式網頁，在維基百科上有這樣的定義，響應式網頁(Responsive Web Design，RWD)，是一種網頁設計的技術，這種設計可使網站在不同的裝置（...
擷自 digitalsynopsis.com 在前面的篇章中，我們學習了如何撰寫CSS的各個屬性來設計出精美的網頁，但您是否有想過：「用電腦設計出來的網頁，為...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 理解網頁設...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨，大家好 ! 我是阿蘇今天是Day24 ，今天分享的是 以 Boostrap 為核...
昨天有介紹 Aspect Ratio 運用在 RWD 排版相當的方便 如下圖是旅遊類型的卡片 卡片排列四欄，卡片寬度會隨著螢幕寬度做變化，就很適合使用 Aspe...
Day 16 - 切版進階技巧(二) : RWD、版型規劃 每日一談 嗨，大家好 ! 我是阿蘇今天是Day16 ，今天分享的是RWD、版型規劃，目前大部分的網...
什麼是 RWD ？ 有發現同一個網站，在使用 電腦 、 平板 和 手機 瀏覽時，視覺上 排版方式 不太一樣嗎？這個就是 RWD（響應式網頁設計） 。 以下引用自...
在開發時，"容器"不可或缺且面對響應式設計 (RWD) 更需要有容器的概念才適合做出自適應的網頁，現在就讓我們來看看容器與 RWD 是如何在...
製作簡單點選切換互動，搭配Bootstrap就能輕鬆有RWD的效果呦！此範例需引用Bootstrap, fontawesome, jQuery呦。 原頁面比例...
透過控制 p margin:5px auto; 調整文字上下間距透過 @media screen and (max-width: @media screen...
以此為模版將需要的內容圖片填進去 <!DOCTYPE html> <html> <head> <meta name=&...
前一篇我們實驗 Constraints 各種設定會造成的影響後，相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的，實際應用在真實的...
Constraints 是 Figma 中一個很重要的功能，它可以讓我們的設計在做拉伸的時候，變的更加彈性，當你需要做 RWD (Responsive Web...
在上一篇：用HTML、CSS、JS打造個人網站 (2)，完成了網頁的所有內容，接下來的工作就是讓網頁能夠適應各種螢幕大小，讓使用者在每個裝置都能有最基本的使用...
除了昨天提到的media query可以做出響應式網頁之外，今天介紹的Bootstrap 5.1版本也能快速上手，更輕鬆的做出排版喔！ Containers 容...
此篇會將響應式斷點設計拆為以下三個部分來介紹。 viewport 尋找容器 設置斷點 viewport 定義：網頁的可視區域，代表使用者能看到的網頁範...
哈囉～很快的已經來到了第九天，前面帶給大家都是一些網頁的基礎，後面會針對各種主題有更深入的探討喔，今天要介紹的是響應式設計的設計重點，也是電商網站很需要重視的一...
carolcheng
jerrythepotato
Ericostco
Jessie
ysl0628
luna0228
ThisIsFrankTsai
ttdragon0722
Eva Chen
阿蘇蘇
indexhui
Olivia
linlaose
Alice CH
Rson Wilson
May
atain880625
Kent
iThome鐵人賽
看影片追技術