Hi~又見面啦
今天來學習一下 RWD 的基礎小語法，希望可以學習練習的過中程能熟能生巧呀
想要讓原本在桌上型電腦能看的網頁加上 RWD 自適應網站功能時需先加上 meta 語法：
a841722
<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 檔案，在引入到這個網頁去做讀取
<link rel="stylesheet" href="css/style.css">
其中 "css/style.css" 是檔案路徑，每個人的檔案路徑取名不一定是相同的。
這裡分享一個我剛開始學的一個錯誤，一開始在學怎麼引入 CSS 檔案的時候完全不熟就直接複制貼上別人的語法，當然要想要呈現的 CSS 樣式完全出不來XD
這時候立馬轉頭跟工程師男友求救：為什麼出不來，我有引入啊Q_Q
此時男友默默的看了一下：因為你檔案路徑不是這個，你直接照抄當然出不來.....
不知道有沒有新手跟我一樣笨的(誤XD
所以記得要寫對檔案路徑呀~~~
接下來我們要把網頁有圖片的部份加上 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加油~~!!!
iThome鐵人賽
看影片追技術