第 9 集：RWD 响应式
此篇会着重在 Bootstrap 5 响应式的介绍以及使用方法。
RWD
响应式网页设计 (Responsive Web Design) 简称
RWD，为了让网页排版能适应不同尺寸的装置，透过 CSS3 的media query针对不同装置来设置对应的样式。
环境设置
Step1：起手式（设置 viewport）
在
<head>标签引入viewport的<meta>标签
-
width=device-width: 浏览器页面宽度=当前装置的宽度。（ex: 平板、手机） -
height=device-height：浏览器页面高度=当前装置的高度。（ex: 平板、手机） -
initial-scale=1.0: 画面初始缩放比例为 100%（即不放大也不缩小）。 -
minimum-scale：允许使用者缩放到的最小比例。 -
maximum-scale：允许使用者缩放到的最大比例。 -
user-scalable: 设定使用者能否手动缩放比例，user-scalable=no就是不允许缩放。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Step2：透过断点来设置不同装置大小对应的样式
bootstrap 5 使用响应式会在样式後面加上 -* 断点的通用类别名称。（ex：class="p-md-2"）
示范：此容器的 padding、文字大小，都设置了三个断点，并对应不同尺寸装置所显上的样式。
<div class="p-1 p-md-2 p-lg-3">
<p class="fs-1 fs-2 fs-3">响应式文字</p>
</div>
media query
用来判别装置的尺寸，在设置相对应尺寸的样式。
media 语法：
-
@media (条件) {样式}
透过
max-*、min-*设置不同装置尺寸的范围，来指定对应样式。
@media(max-width:767px) {
.container{
max-width: 720px;
}
}
@media(max-width:992px){
.container{
max-width: 960px;
}
}
覆盖特性（程序码由上到下），因此後面样式会覆盖前。
断点
断点是响应式开发的基础，使用断点来控制在特定尺寸或设备上调整布局。
常见尺寸：
- 手机：375 ~ 414（最小的是 iphone5、SE - 320px）
- 平板：iPad 768px
- PC：1140、1200
常用设置：
- Phone：767px（iPad 是 768px，因此 767 以下皆算手机装置）
- iPad-PC：992px
- PC：1200px
装置大小
- min-width：手机优先（装置从小到大）
- max-width：桌机优先（装置从大到小）
Bootstrap 是 min-width 手机优先，预设没有断点状况是手机大小的样式。
手机优先（由小写到大）：CodePen范例
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }
桌面版优先（由大写到小）：CodePen 范例
@media (max-width: 1399.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 575.98px) { ... }
注意事项：
- 记得由优先权高的先写，并依照
顺序撰写，不然样式会无法覆盖。（覆盖特性後面的样式会覆盖前面的样式）/* 错误范例 */ @media (min-width: 576px) { ... } @media (min-width: 992px) { ... } @media (min-width: 768px) { ... } - 不要
min-width、max-width混用。/* 错误范例 */ @media (min-width: 576px) { ... } @media (max-width: 992px) { ... } - 断点
越少越好 3-4 个即可。（不要超过五个，除非客户很机八）
min-width、max-width 如何选择 ？
小技巧：
- 看产品是否专为某种客群做使用。
- 全部装置都包，那就看习惯哪个。
我自己喜欢 min-width 比较方便设置 @media 区间，平时也使用 Bootstrap 比较多。
职场小聚场
第一次 Demo
第二次 Demo
小技巧
善用版型单位%
问题：版型写死导致子元素破版超出父元。
解决：
- 透过
% 数计算容器大小，来达到尺寸自适应缩放。
% 数计算：
- 100 / 需要的栏数
- 一栏：100%
- 两栏：50%
- 三栏：33.333%
通常不会算满 100% 会少一点点预留空间。
max-width 取代 width
网页出现滚动轴，别说是 RWD 网页。
问题：外层写死了宽度，导致浏览器没有自适应缩放，小於 1400px 时就会出现 x 轴。
container{
width: 1400px;
}
解决：改写为 max-width。
row {
max-width: 100%;
/*max-width: 1400px;*/
margin: 0 auto;
}
优点：
- 可指定最大尺寸，使其不会无限放大或缩小。
- 自适应父层尺寸。
如何判断网站是否有使用 RWD
- 是否有设置
viewport？
- 没有设的，都不能称 RWD。
- 是否有出现滚动轴（除非是设计好的）
- RWD 会自适应推挤内容，不应该出现滚轮（滚动轴）。
>>: [Day24] React - 浅谈SPA（single-page applications）
【Day 20】- 让 Selenium 去 Dcard 上自动向下卷动 (实战 Selenium 模拟使用者划手机 2/2)
前情提要 前一篇实作了 Selenium 爬取 Dcard 文章的爬虫，可以看到会出现一个浏览器视窗...
Day 26路由堆叠
(一)介绍 透过push方法将B处於堆叠顶端。 透过pop方法将B从堆叠中移除。 结论：Naviga...
JavaScript IIFE (立即函数)
甚麽是立即函数? IIFE (Immediately Invoked Function Expres...
Day22-pytorch(5)简单示范regression模型
先import各种会用到的套件 使用sklearn的datasets套件建立要regression的...
[DAY 20] 树耳朵 oh les feuilles
树耳朵 oh les feuilles 地点：台南市白河区94-7号 时间：五六日 13:00~17...