RWD網頁設計教學：淺談響應式網頁語法- 玩構網路

RWD網頁設計前言. 隨著行動裝置普及以及成為主流，網站的響應式網頁設計(Responsive Web Design)也越來越重要或是可以這樣說，在這幾年如果您的網站沒有響應式設計或是 ... 網路行銷學院 聯絡玩構 玩構網路»WebDesign»RWD網頁設計教學：淺談響應式網頁語法 RWD網頁設計教學：淺談響應式網頁語法 1712月,2019 RWD網頁設計前言 隨著行動裝置普及以及成為主流，網站的響應式網頁設計(ResponsiveWebDesign)也越來越重要 或是可以這樣說，在這幾年如果您的網站沒有響應式設計或是響應式設計得不好…那就Low掉了 使用者體驗設計 RWD基本名詞解釋 在進入響應式語法之前，有幾件事情需要先說明清楚，以免看得霧煞煞~ 斷點指的是螢幕寬度在什麼範圍的時後顯示特定CSS，Ex:1280/768/480 RWD響應式設計分為2派，1派從手機開始設計，另1派主張從桌機開始設計 手機優先設計從最小寬度(min-width)開始設計，一開始能在小寬度思考什麼是網頁中最重要的內容。

桌機優先設計從最大寬度(max-width)開始設計，一開始就思考怎麼把客戶所有的內容給塞進網頁中。

一般常見的響應式斷點有1280px、1200px、992px、768px、680px、480px…等 RWD語法範例 CSS語法示範 好的，進入RWD語法設計正題，最重要的程式碼就是@mediaonlyscreenand(mxx-width:XXXpx){寫入CSS語法} @mediaonlyscreenand(max-with:XXXpx)指的就是當螢幕寬度在XXXpx以內的時候瀏覽器要套用什麼CSS樣式 以下舉個實務上的語法範例，我們採用桌機優先設計來說明。

提醒：手機優先設計要從小螢幕開始設計哦~ @mediaonlyscreenand(max-width:1280px){ #main#content-wrap{ font-size:16px; background-color:#666666; } } @mediaonlyscreenand(max-width:768px){ #main#content-wrap{ font-size:18px; background-color:#AAAAAA; } } @mediaonlyscreenand(max-width:480px){ #main#content-wrap{ font-size:20px; background-color:#FFB7DD; } } 以上範例可以想成CSSID“main”以及“content-wrap”的網頁區塊： 當使用者用桌上型電腦瀏覽時，字體大小為16px且背景顏色為深灰色 而當使用者切換成平版瀏覽時，字體大小為18px且背景顏色為淺灰色 最後當使用者使用手機瀏覽時，字體大小為20px且背景顏色為粉紅色 有人可能會問Chris，為什麼螢幕寬度必需隨程式碼由上至下遞減呢？老師剛說的有沒有在聽？因為是桌機優先設計阿！其實正確來說呢… CSS的邏輯是後面寫的會蓋過前面的語法，所以如果採用Desktop-first的設計，RWD語法由上至下依序必須由螢幕寬度大寫到螢幕寬度小；反過來說如果採用Mobile-first的設計，RWD語法由上至下依序必須由螢幕寬度小寫到螢幕寬度大。

RWD網頁設計 結語 今天的RWD響應式語法簡介就介紹到這邊，最後Chris溫馨小提醒以下事項： 不論我們是用桌機優先或是手機優先來做RWD的網頁設計，在網站製作完成移交給客戶或是公司之前，記得要使用Google的行動裝置相容性測試來做驗證，確保我們的響應式網頁設計是被Google認可的哦！ 延伸閱讀：GoogleSearchConsole教學，3分鐘提升網站排名！ Facebook Twitter Youtube 有網路行銷需求？ 還在作沒有成效的行銷嗎？立即聯繫玩構，打造專屬網路行銷專案。

0958-078032Chris林先生 0963-003316Anna蔡小姐 聯絡我們 wango PrevPrevious【網頁設計教學】如何擷取整個網頁？ NextCSSrem、em用法為何？網頁設計字體大小怎麼用Next 更多相關文章 phpfile_get_contents遇到亂碼如何處理 2810月,2021 file_get_contents為何file_get_contents()是php內建的函式，可 閱讀文章 Cloudways如何增加maximumfileuploadsize 2010月,2021 Cloudways是一家知名的雲端主機代管服務商，他們本身不直接營運主機，而是整合各家VPS主機、雲 閱讀文章 CSSrem、em用法為何？網頁設計字體大小怎麼用 147月,2021 各位網頁設計師、行銷人員、老闆們在操作網站設計時，有沒有常被字體大小的單位給困擾？目前瀏覽器預設的字 閱讀文章 文章分類 SEO優化 SEO好處 SEO工具 SEO指南 新手入門 站內優化 站外優化 SEO案例 SEO消息 網頁設計 主機相關 前端語法 後端語法 網域相關 設計相關 熱門文章 【網頁設計教學】什麼是虛擬主機？主網域、子網域、網域寄放及附加網域差異？【網頁設計】不會寫程式也能輕鬆架設網站！【網頁設計教學】如何擷取整個網頁？RWD網頁設計教學：淺談響應式網頁語法CSSrem、em用法為何？網頁設計字體大小怎麼用Cloudways如何增加maximumfileuploadsizephpfile_get_contents遇到亂碼如何處理 台中、彰化 台中市西屯區寶慶街50巷6-8號 0958-078032Chris林先生 0963-003316Anna蔡小姐 嘉義、台南 台南市永康區永大路三段469巷30弄1號 0958-078032Chris林先生 0963-003316Anna蔡小姐 高雄、屏東 高雄市楠梓區健民街70號 07-6075007 0963-003316Anna蔡小姐 社群媒體 Facebook-f Instagram Youtube Blog Twitch Wordpress 合作夥伴 ©2022玩構網路AllRightsReserved隱私權政策台中市西屯區寶慶街50巷6-8號 熱搜關鍵字：高雄監視器台中當舖台北身心科股票貸款貸款推薦 IP位址：42.77.233.152所在城市： Close