RWD(Responsive Web Design)自適應網站的製作方式
首先,你必須先在網站開始的地方加上以下meta語法,用於規定裝置的的結構規則:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;">
其次,需將所有有圖片的地方,加上以下CSS語法,方便圖片按照螢幕寬度的自動縮放:
img {
height: auto;
max-width: 100%;
}
最後在CSS的地方加上以下規則(通常最少我們都分3個尺寸),讓不同寬度大小,給予新的不同CSS規則,就完成了:
// Media Query ,也就是當寬度 < 768 px 時將載入下面這段 CSS :
@media only screen and (max-width: 768px) {
//CSS的內容
....
}
// Media Query ,也就是當寬度 < 480 px 時將載入下面這段 CSS :
@media only screen and (max-width: 480px) {
//CSS的內容
....
}
// Media Query ,也就是當寬度 < 320 px 時將載入下面這段 CSS :
@media only screen and (max-width: 320px) {
//CSS的內容
....
}
你看,是不是蠻簡單的。不過在使用這項技術前,設計師必須具有一定的CSS基礎與Grid格線的概念,才更容易做出RWD的網站。
CSS Grid System 與 CSS Fluid Grid System 網頁版面
Grid 這個字有「格」的意思,沒錯,Gird System 就是把網頁變成有規則性大小的格子,我們以 Bootstrap 的 Grid System 來看,總共有 12 種欄寬,從大到小都有。我們就可以直接使用 Grid 網格系統,能讓開發過程變得很快。