rwd設計原則rwd網頁作品rwd設計rwd網頁程式設計rwd網頁

[筆記] 基本RWD版型設計

文章推薦指數： 80 %
投票人數：10人

讓網頁不會自動因手機螢幕變小而扭曲，使得RWD網頁能正常執行-->

我 ... //Skiptocontent 2015年5月1日 最近在馬老師雲端工作室開始上了RWD的課程，索性整理一些筆記。<br><br> 設計出來的網頁長得像這樣。<br><br> HTML部分 <metacharset> <!--讓網頁不會自動因手機螢幕變小而扭曲，使得RWD網頁能正常執行--> <metaname> <title>我的第一堂RWD
有名堂史 菜色導覽 最新活動 分店資訊 意見回饋 線上訂購 關於作者

有名堂讓飲食富有新生命！

在這裡您可以品嘗到道地香港師傅料理的菜餚，手工捏製的點心，以及創意多元的料理，不論是熱炒、點心、飯麵粥品、煲湯、手工甜品等，全都是師傅的拿手好菜。

台北市文山區木新路3段123號

網站企劃製作：巨匠電腦永和分校馬世驊老師　版型繪製：黃千秀
這裡面比較需要注意的地方： 1.多利用HTML預設的標籤： 在設計網頁時，可以多利用HTML預設的標籤，像是
，這樣也可以有利於SEO。

關於HTML中的標籤，可以參考馬老師寫的這篇HTML介紹。

2.插入一段meta： 在RWD中，為了要讓行動裝置能夠正確讀取RWD的版型，避免網頁因裝置螢幕變小而自動扭曲網頁的現象，我們要在中加入下面這段語法： 這段的意思是把網站呈現的寬度設定成和裝置的寬度一樣（如果裝置的寬度是320px，則網站的寬度也設成320px），而不是把960px的網頁內容所小成320px來呈現；initial-scale=1的意思，就是不要縮放網頁的意思。

更多的說明可以參考＜CSS-TRICKS:ResponsiveMetaTag＞這篇文章。

3.不重要的圖片放在Background 不重要的圖片指的不是網友會不會看到或圖片重不重要，而是指網友不會點選到的圖片，這類的圖片我們都在CSS中用background-image來呈現，而不要在網頁中用img屬性。

4.引入外部CSS檔案 我們可以在另一個檔案把CSS寫好，然後引入這個網頁中讀取，方法是使用：   rel指的是這個檔案和這個網頁的關係（relationship），這裡是樣式表的關係。

CSS部分 /*適用於電腦螢幕*/ @mediascreen{ div{ width:880px; height:560px; margin:auto; } header{ width:880px; height:260px; background-image:url(images/header.jpg); } nav{ width:880px; height:55px; background-image:url(images/nav.gif); } navimg{ margin:5px25px0px; } aside{ width:635px; height:265px; background-image:url(images/aside.jpg); float:left; } asideimg{ display:none; } span{ display:none; } article{ width:245px; height:265px; background-image:url(images/article.gif); float:left; font-size:13px; } articleh1{ font-size:20px; color:brown; text-align:center; font-family:微軟正黑體; text-align:center; margin-top:40px; } articleh2{ font-size:14px; font-weight:normal; text-align:center; margin-top:30px; } footer{ width:880px; height:20px; background-image:url(images/footer.gif); clear:both; font-size:13px; text-align:center; } } /*適用於印表機列印時*/ @mediaprint{ div{ width:80%; height:auto; margin:auto; } header{ width:880px; height:260px; background-image:url(images/header.jpg); display:none; } nav{ width:880px; height:55px; background-image:url(images/nav.gif); display:none; } navimg{ margin:5px25px0px; } aside{ width:100%; height:auto; background-image:none; float:none; text-align:center; } span{ display:none; } article{ width:100%; height:auto; background-image:none; float:none; font-size:16pt; } articleh1{ font-size:20pt; color:brown; text-align:center; font-family:微軟正黑體; text-align:center; margin-top:40px; } articleh2{ font-size:16pt; font-weight:normal; text-align:center; margin-top:30px; } footer{ width:100%; height:auto; background-image:none; clear:both; font-size:13px; text-align:center; } } /*適用螢幕寬度小於480px的裝置（當螢幕小於480px時）*/ @mediascreenand(max-width:480px){ div{ width:100%; height:auto; margin:auto; } header{ width:880px; height:260px; background-image:url(images/header.jpg); display:none; } nav{ width:880px; height:55px; background-image:url(images/nav.gif); display:none; } navimg{ margin:5px25px0px; } aside{ width:100%; height:auto; background-image:none; float:none; } asideimg{ display:block; margin:auto; } span{ width:80%; margin:auto; height:auto; text-align:center; display:block; padding-top:30px; } article{ width:80%; height:auto; background-image:none; float:none; font-size:13px; margin:auto; } articleh1{ font-size:20px; color:brown; text-align:center; font-family:微軟正黑體; text-align:center; margin-top:40px; } articleh2{ font-size:14px; font-weight:normal; text-align:center; margin-top:30px; } footer{ width:100%; height:auto; background-image:none; clear:both; font-size:13px; text-align:center; display:none; } } /*適用於平版直著拿的情況（平版橫著拿的情況就和電腦螢幕相同）*/ @mediascreenand(min-width:481px)and(max-width:768px){ div{ width:100%; height:auto; margin:auto; } header{ width:880px; height:260px; background-image:url(images/header.jpg); display:none; } nav{ width:100%; height:auto; background-image:none; text-align:center; padding-bottom:30px; } navimg{ margin:5px5px0px; } aside{ width:100%; height:auto; background-image:none; float:none; text-align:center; } asideimg{ display:inline-block; } span{ display:none; } article{ width:80%; height:auto; background-image:none; float:none; font-size:16px; margin:auto; } articleh1{ font-size:24px; color:brown; text-align:center; font-family:微軟正黑體; text-align:center; margin-top:40px; } articleh2{ font-size:20px; font-weight:normal; text-align:center; margin-top:30px; } footer{ width:100%; height:auto; background-image:none; clear:both; font-size:16px; text-align:center; } } CSS的部分看起來雖然很長，但可以分成幾個重點 1.利用@media來說明適用時機 這裡主要有四個不同的media @mediascreen{css樣式} 是適用於一般的電腦螢幕，除非特別還有針對大螢幕設計，不然以寬度1024px以上的都算是電腦螢幕。

@mediascreenand(max-width:480px){css樣式} 是適用於手機的，意思是當螢幕小於480px時適用。

一般手機的螢幕寬度大多都小於480px，所以我們可以把寬度小於480px的都當作手機適用的尺寸。

@mediascreenand(min-width:481px)and(max-width:768px){css樣式} 意思是當螢幕小於768px，大於481px的情況。

這是給平版適用的，但是是平版直著拿的情況，因為一般平版橫著拿的時候寬度就是1024px了，所以一般來說可以直接適用電腦螢幕的格式，所以我們只需要設計平版直著拿的時候所看到的畫面。

@mediaprint{css樣式} 這是給印表機列印時使用的 2.適當的使用display:none 適當的使用CSS中的display:none把不需要呈現的區塊隱藏起來。

3.印表機的設計 印表機的CSS中，比較特別的是長度和寬度的單位要用cm，或者直接用%來表示，而文字大小則要用pt來表示。

在列印時背景圖片並不會自動顯示出來，需要另外於列印時勾選「列印背景圖片」。

4.行動裝置的長度、寬度設計 行動裝置的寬度常根據想要的寬度用%來改變，而高度就用auto。

一般來說，相當常用的是width:100%;height:auto，或如果左右要留邊的話就用width:80%。

5.並排呈現 在這個例子中，我們可以看到aside和article這兩個區塊是並排的，要做到這個功能，我們可以用float來達到，我們讓aside和article這兩個區塊都是float:left。

最後有一個很重要的動作，是因為aside和article這兩個區塊都浮起來，所以下面的footer會趁虛而入，這時候在footer的區塊，我們要使用clear這個指令（clear:both）把float造成的效果清除掉。

6.關於水平置中 如果是區塊要水平置中，一般使用的是margin:auto這樣的指令，但有些時候雖然是區塊，卻還是沒辦法置中，這時候要注意是不是因為我們沒有給它寬度，當沒有給它寬度的時候，預設就是和螢幕一樣寬，所以也沒辦法再將區塊進行置中的動作。

如果是一個區塊內的內容要水平置中，這時候就要用到text-align:center這樣的指令。

在asideimg這個css中，為了要讓它顯示出這個區塊，我們使用了display:block，但是這會使得在aside這個區塊中，無法使用text-align:center來置中圖片，因為img已經被當成一個區塊來處理的，這時候如果我們想要將asideimg這張圖片置中的話，我們要直接在asideimg這個區塊的css中加入margin:auto來達到水平置中的效果。

以上內容均為本人在馬老師雲端研究室學習所整理之筆記 Share: 較新的文章 較舊的文章 首頁 0 意見: 張貼留言

請為這篇文章評分？

延伸文章資訊