iT邦幫忙

1

[鼠年全馬鐵人挑戰] Week07 - 新手學習筆記: RWD 基礎語法

Hi~又見面啦

今天來學習一下 RWD 的基礎小語法,希望可以學習練習的過中程能熟能生巧呀/images/emoticon/emoticon25.gif

想要讓原本在桌上型電腦能看的網頁加上 RWD 自適應網站功能時需先加上 meta 語法:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

在練習過程中發現當我們在新增一個 HTML 檔的時候,使用 HTML5 的快捷鍵時系統本身會先幫你預設好一些語法(這裡使用的是 vs code),其中一個就這是本文提到的 meta 語法:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

在使用起來就方便了許多,所以就可以 不用記語法了 (大誤XDD

引入 CSS 檔案

接下來就是要引入 CSS 檔了,先寫好一個 CSS 檔案,在引入到這個網頁去做讀取

<link rel="stylesheet" href="css/style.css">

其中 "css/style.css" 是檔案路徑,每個人的檔案路徑取名不一定是相同的。
這裡分享一個我剛開始學的一個錯誤,一開始在學怎麼引入 CSS 檔案的時候完全不熟就直接複制貼上別人的語法,當然要想要呈現的 CSS 樣式完全出不來XD
這時候立馬轉頭跟工程師男友求救:為什麼出不來,我有引入啊Q_Q
此時男友默默的看了一下:因為你檔案路徑不是這個,你直接照抄當然出不來.....
不知道有沒有新手跟我一樣笨的(誤XD
所以記得要寫對檔案路徑呀~~~/images/emoticon/emoticon06.gif

接下來我們要把網頁有圖片的部份加上 CSS 的這個語法:


img {

     height: auto;

     max-width: 100%;

 }
 

加上這個語法目的是,在開發的過程中可以放便圖片去按照螢幕寬度自動縮放,開發過程也能更加的順利快速。

在 CSS 的部份,需寫以下語法,可以讓網頁在不同的裝置做自適應,這裡介紹幾個較常見裝置尺寸的語法:

適用於一般桌上型電腦觀看時需寫入這段 CSS 語法:

@media screen {

    //這裡是寫入 CSS 的樣式 
    
    
}

適用於平版直立式觀看時,當寬度 小於 768 px 適用於平版直立式觀看需寫入這段 CSS





 @media screen and (min-width:481px) and (max-width:768px {

     //這裡是寫入 CSS 的樣式   

}

適用於手機使用觀看時,當寬度 小於480 px 時需寫入下面這段 CSS :


 @media only screen and (max-width: 480px) {

     //這裡是寫入 CSS 的樣式 

}

適用於 IPHONE 4、5直立式使用,當寬度小於 320 px 時需寫入下面這段 CSS :


 @media only screen and (max-width: 320px) {

     //這裡是寫入 CSS 的樣式 

     

}

除了上面這些,當然還有許多不同裝置尺寸的語法,市面上有許多種不同大小的手機、平版、桌上型電腦等等,每一種需要寫入的 px 都有所不同,就依當下專案的需求來去撰寫,要如何寫出符合使用者的最佳使用體驗是最重要的。

寫這篇文章其實也花了不少時間呢,不過在寫文的過程中慢慢的加深印象也是不錯的,原來這就是寫文的目的呀~XDD
不過專業程度還有待加強,繼續加強努力,gogo加油~~!!!


尚未有邦友留言

立即登入留言