用户投稿又过了一週啦~
一样是超忙的一週~~
下班回家努力练习切版直播的作业，不过这次的版型比较複杂所以卡关了QQ
真的是烧脑烧到一个极点
这次的作业除了 PC 版之外，还需练习 RWD 平版及手机的写法
嗯 一如往常的 一路卡关到底 (莲花指大哭跑走ing~~~
坐在电脑面前发呆兼「这是哪里，我是谁，这是异次元空间吗?」的无力感的我.....
觉得这样下去不是办法，所以休息一下来做个笔记吧~!(好啦，顺便交文章嘛...)
RWD 要如何开始写呢???
要写 RWD 之前，基本上应该都会先写好 PC 版的 HTML及 CSS(有直接写 RWD 没写 PC版的吗?)
RWD 撰写的方式最常见的是直接在原有的 CSS 档案里在加上 RWD 的语法，在加以变化;
另一种方法是另外在新增CSS 档案，如果有写到平版及手机，则新增两个 CSS 档案，新增的档案只写该装置的 RWD 语法，範例如下：
<!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 里
在写 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!!!
微信扫一扫打赏
支付宝扫一扫打赏
