又過了一週啦~
一樣是超忙的一週~~
下班回家努力練習切版直播的作業，不過這次的版型比較複雜所以卡關了QQ
真的是燒腦燒到一個極點
這次的作業除了 PC 版之外，還需練習 RWD 平版及手機的寫法
嗯 一如往常的 一路卡關到底 (蓮花指大哭跑走ing~~~
坐在電腦面前發呆兼「這是哪裡，我是誰，這是異次元空間嗎?」的無力感的我.....
覺得這樣下去不是辦法，所以休息一下來做個筆記吧~!(好啦，順便交文章嘛...)
要寫 RWD 之前，基本上應該都會先寫好 PC 版的 HTML及 CSS(有直接寫 RWD 沒寫 PC版的嗎?)
RWD 撰寫的方式最常見的是直接在原有的 CSS 檔案裡在加上 RWD 的語法，在加以變化;
另一種方法是另外在新增CSS 檔案，如果有寫到平版及手機，則新增兩個 CSS 檔案，新增的檔案只寫該裝置的 RWD 語法，範例如下：
a841722
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>glasses</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/glasses.css">
<link rel="stylesheet" href="css/glasses_pad.css">
<link rel="stylesheet" href="css/glasses_mobile.css">
</head>
除了原本清除原本 CSS 樣式的 reset.css、PC版的glasses.css
下面兩個 CSS檔案就是分出來撰寫平版及手機版的 CSS
我覺得這樣分出來的寫法比較適合一開始還不熟且容易搞混的新手 (對，就是我.....)
先分開寫，等熟悉了以後在合併在一個 CSS裡，新手如果跟我一樣怕搞混可以先試試這樣的做法唷:)
這裡要注意的是，撰寫 RWD 前要先注意 HTML有沒有這段語法：<meta name="viewport" content="width=device-width, initial-scale=1.0">
通常一開始再用 vs code快捷鍵 ! tab 系統就會預設這段語法，要有這段語法 RWD才能有作用喔!!!
沒有這段語法，要記得加上去
在寫 CSS 前記得要加 @media(max-width: XXXpx) {}
最大寬為多少尺寸，最常見的是平版：768px、手機375px
看專案需要讓多少裝置使用者瀏覽而定，RWD的相關語法要寫在{}裡
範例如下：
@media(max-width: 375px) {
/* 頁首區塊 */
header {
padding: 10px 0;
height: 30px;
position: relative;
}
header div {
width: 100%;
text-align: center;
}
header div img {
width: 48px;
}
header .menu_line {
display: block;
position: absolute;
width: 24px;
left: 16px;
top: 13px;
}
header ul {
display: none;
}
/* 封面的區塊 */
section.container-cover .title p {
font-size: 16px;
line-height: 22px;
}
section.container-cover .title-h1 {
font-size: 32px;
line-height: 45px;
}
section.container-cover .title {
margin: 163px 12px 0 0;
max-width: 363px;
}
section.container-cover {
background: url("../images/68@2x.png") center / cover no-repeat;
height: 394px;
background-size: 375px 394px;
}
/*專業的區塊*/
.container-profession .profession-wrap {
padding: 32px 0 56px;
}
.container-profession ul {
max-width: 224px;
margin: 32px auto 0;
}
.container-profession ul li {
margin-bottom: 28px;
}
.container-profession ul li:nth-child(2) {
margin-bottom: 28px;
}
.container-profession ul li:nth-child(3) {
margin-bottom: 28px;
}
.container-profession ul li:nth-child(4) {
margin-bottom: 0;
}
.container-profession .profession-h2 {
font-size: 24px;
line-height: 33px;
}
.container-profession .profession-h3 {
font-size: 20px;
line-height: 28px;
}
.container-profession p {
font-size: 16px;
line-height: 24px;
}
}
由上面程式碼，我們可以知道 手機版的相關語法都已寫進 @media(max-width: 375px) {} 的 {}裡了，一開始我覺得好奇怪，{}裡面還可以再給class 再寫他的相關樣式的語法嗎?整個很怕是不是會破版或跑不出來，
答案是：不會的XD 勇敢的給他寫上去吧!!! 這樣才是正確的寫法唷:)
在這裡分享一個我在練習時出了一個錯誤，就是我發現我寫了一段語法為什麼 手機版的沒作動，PC 版被影響惹!!!oh，不!!! 怎麼降!!!
仔細一看，喔~原來我最下面的 } 沒加 這樣是一定會影響到 PC版der~XDD
OK! 筆記做到這，繼續努力研究 RWD 去，加油~go!!!
iThome鐵人賽
看影片追技術