[Day 07 - RWD] 跨平台生存之道 — RWD响应式网页设计
现在越来越多种类的装置出现，包括电脑、平板、手机，我们会在不同大小的萤幕上浏览网页，究竟网页要如何在所有设备上，都能显示适合该装置的排版模式？在过去会根据装置来给予不同的 CSS 档案，现在我们常采用、不能不提的就是 — RWD。
RWD 响应式网页设计
RWD（Responsive Web Design，响应式网站设计），是一种能够针对不同的萤幕大小，在同一份档案去设定不一样的排版、样式，让网页能够在每个装置上都能有最佳的浏览体验。
设置Viewport
Viewport 的作用是告诉浏览器，视窗大小变化时，网页内容的该如何缩放。
在 HTML 的 <head></head> 里设定 Viewport：
<meta name="viewport" content="width=device-width, initial-scale=1">
左侧为没有使用/右侧有使用 Viewport，引用自w3schools-RWD
使用 Media Query
Media Query 是一种条件式的 CSS 设定，在同一份 CSS 档案，你可以针对不同大小的萤幕去设定断点(Break Point)，控制不同的排版并调整 CSS 的样式。
// 当萤幕大小在480px以下，设定body背景为红色
@media screen and (max-width: 480px) {
body {
background-color: #C98986;
}
}
小结
做网页不只要考虑到电脑，在行动装置上的使用体验也是很重要，根据上面两个步骤来使用 RWD 响应式网页设计，除了让网页可以满足不同的萤幕大小，也因为只需要管理一个网站，减少了维护与开发成本。学会了写 CSS 之後，接下来我们会提到如何建立易读易写的规则系统，优化 CSS 的维护与管理。那我们就下一章再见罗！
如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️
参考资料
#Day20--那些年，我们一起犯的傻
这篇会是一个中场休息，但主要会分享的是，我在踏入实作的那一瞬间，对於写程序所产生的不良习惯，希望可以...
新新新手阅读 Angular 文件 - Interpolation(1) - Day13
本文内容 本文内容为阅读官方文件有关interpolation 的笔记内容。 利用 interpol...
Day 26路由堆叠
(一)介绍 透过push方法将B处於堆叠顶端。 透过pop方法将B从堆叠中移除。 结论：Naviga...
线性串列的循环/双向链式储存 - DAY 6
线性串列的循环链式储存 定义 线性串列的链式结构，尾节点的指标会指回首节点 优缺 优点： 任一节点都...
[访谈] APCS x 竞程国手 Wiwi Ho
很荣幸能够邀请到今年资讯奥林匹亚的国手 Wiwi Ho 来分享他在学习程序路程上的经历、对於 APC...