大家聽到RWD(Responsive Web Design)響應式網頁設計時,沒接觸過的人會覺得聽起來好像很難,尤其看到像是職訓或專門寫程式的人開教學或講座,一堂課動輒上千塊,非工程師背景的人即使有錢有閒買下課程,也會害怕學不會。
但其實實務上只需要用到CSS和HTML各一行,基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。
不過不得不說,確實會一點CSS比較知道這兩行代表的意義以及實用性,但就算什麼都不懂,我也會舉例給你,相信經過這篇文章,未來你只要再去學習HTML和CSS,你就同時學會RWD了!
Table of Contents
CSS的RWD做法
我們先看程式碼,這行要寫在CSS的檔案中:
@media screen and (max-device-width: 768px){
/* CSS內容 */
}
這行的意思是,當系統偵測到裝置寬度低於768px時,就自動執行大括弧中的CSS內容。
於是通常會寫一種電腦版,配上一個RWD版本,如下:
/* 電腦版 */
body{
background:red;
}
/* 行動裝置版 */
@media screen and (max-device-width: 768px){
body{
background:green;
}
}
這樣一來,根據CSS相同項目設定會由後方設定覆蓋過前方設定的原則,當行動裝置寬度低於768px時,背景就會變成綠色的了。
歡迎大家透過F12網頁的開發人員工具進行測試!
F12網頁的開發人員工具
這裡簡單提一下F12開發人員工具,如下圖的截圖中,你在網頁按下F12之後會出現截圖中的畫面,上面那個區塊是HTML的部分;
下面那個區塊是當你點選上方HTML標籤後,該標籤的CSS設定。
接著,F12點選下圖紅色框起的按鈕,就可以看見你剛剛設定的手機版本樣式囉!
由於把網頁瀏覽器寬度直接縮放,跟裝置縮放是兩回事,因此若還想要達到網頁瀏覽器寬度縮放的效果,要把@media那行括號中的device拿掉,再根據你的測試抓適當的視窗寬度,範例如下:
/* 原本括弧中的內容是max-device-width */
@media screen and (max-width: 1000px){
body{
background:green;
}
}
HTML的RWD做法
再來就是因為HTML要加入的內容,這可以避免你一個區塊一個區塊手動把文字內容放大,加入這行就可以讓裝置偵測你是網頁但用手機裝置顯示而自動調整:
<!-- 加在HTML的<head>標籤中 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">
實務上有時候畫面比較寬資料量大時,會設initial-scale=0.6和minimum-scale=0.6,當然這是依據需求所做的調整。
但基本上只要加入了這行,再也不用擔心網頁的文字放在手機會小到完全看不到的困境,對超級新手前端是非常大的解藥!!
(延伸閱讀:Radio button和Checkbox放大並自訂樣式)
想當年我差一點點就要全部手動修改字體了…
還好在剛開始改的時候就多思考了幾秒突然覺得不太對,這麼先進的技術怎麼可能手機版要一個一個改CSS,才讓我查到這行拯救我前端人生的程式碼(淚~
結論
學完這兩行對於RWD響應式設計重要的程式碼後,是不是覺得RWD網頁設計其實也沒這麼難呢?
雖然無論是HTML、CSS學習的過程還是充滿許多眉角,但要是能先透過這兩行程式碼帶你速成一個RWD網頁,我想必定能夠讓你在寫網頁的路上增加很大的成就感!