阿嬷都看得懂的响应式网页设计在干嘛

还记得前两天我们在玩贴纸簿的时候，问过这个问题：我们的整个网页到底多宽多高呢？我们并没有给出任何绝对长度，例如 1080px，或 36cm 等等。不过，由於我们使用了 vw, vh 这些单位，所以我们的贴纸，会随着整个浏览器视窗的宽高，来调整大小。

这样的方式，除了我们这些阿嬷工程师可以不用担心使用者的视窗大小之外，无论使用者使用什麽样的设备，也可以看到类似的网页外观。例如，前两天我们也看了几个大品牌的网站。不过，那时候我们是用电脑看的，所以整个网页的外观，是横向的长方形，宽度比高度来得长。不过，如果用手机看这个网页，由於手机是直向的长方形，高度比宽度来得长，所以，假使我们把区块元素的长宽用绝对长度写死，手机就只能看到整个网页的左侧，而无法看到整个满版横幅了。

这种可以适应各种视窗大小与设备的网页设计方式，我们就叫作「响应式设计」(responsive web design)。

由於现在使用者用来逛网站的设备各形各色，从手机、平板、电脑都有，所以响应式设计就显得非常重要，几乎是所有商用网站的标准备配了。由於这样的设计对於使用者非常友善，也会提高搜寻引擎对於网站的评价，提高网站搜寻引擎找出结果的优先顺序，也就是 SEO 喔！

我们来想想看，除了区块的宽高以外，我们在使用不同设备的时候，还可能发生哪些因为视窗宽高不同，而引发的问题呢？

让我们重新看看 Nike 的网页好了，那时候是长这样的：

网页中有 3 个到 4 个水平排列的区块元素，看起来很大器。不过，那是因为我们使用电脑观看，所以视窗有足够的宽度，可以放下这些区块。假使我们使用手机，这些区块就会完全压缩在中间，变得非常狭窄。我们用前几天的贴纸簿练习来看看，在手机上会长怎样：

如果我们还是采取相同的排版，那原本的美图就看不见了！因此，在较窄的装置上，我们不只要相应地改变区块元素的宽高，甚至还必须改变整个版面的配置。让我们来看看 Nike 是怎麽作的吧：

我们可以看见，Nike 将整个排版，从原本的 4 个区块元素水平并列，变成单个区块元素垂直排列了。这样的重新排版，让所有图片都还是可以正常展现。换句话说，我们是因应了视窗的宽高，而改变了排版的方式。

那麽，我们是怎麽知道视窗的宽高呢？在回答这个问题以前，先让我们想想，视窗宽高会是浏览器实际上渲染出的内容，还是告诉浏览器应该怎麽渲染出元件呢？当然是後者。那麽，我们这种标签会放在哪边呢？没错，就是 head 标签当中。我们会使用 meta 标签，并且将 name 属性设为 "viewport" (视图，也就是可看见区域的大小)。这样作以後，就可以在 content 属性中，设定一些关於网页尺寸的内容罗。

例如，我们通常需要告诉浏览器，我们可看见区域的宽度是多少，因此，我们必须在 content 中设置 width=device-width，表示我们的可看见区域的宽度，就是设备 / 浏览器的宽度。另外，我们也必须设定最初的显示比例 initial-scale，通常是设定为 1。因此，整个标签看起来会长这样：

<meta name="viewport" content="width=device-width, initial-scale=1">

注意 content 属性内的各项设定是用半形逗点 "," 隔开，而不是半形分号；属性和值之间也是用等号而非冒号隔开喔！

另外，在 CodePen 当中，由於我们没有写 head 标签，所以会需要进入设定之後，在 <Stuff for head> 的区块填写。不过，CodePen 也很贴心地提供了 "Insert the most common viewport meta tag" 的选项，帮助我们快速输入上面那个标签。

设定完 viewport，让浏览器知道现在装置 / 视窗的宽度以後，我们就可以开始根据视窗宽度，改变整个排版了。以昨天的贴纸簿为例，我们会需要告诉浏览器，在某个宽度以下的时候，我们的橘色贴纸应该和页面同宽，而黄色贴纸应该变成整个直排，而且需要置中。我们会使用

• @media
  这个写法，告诉浏览器，我们要开始看看整个视窗尺寸是多少罗！既然我们是要看整个视窗的尺寸，我们就会使用萤幕 (screen) 这个字样，并且告诉浏览器，视窗尺寸最小是多少的时候，我们的排版样式要改变了。我们通常会选择某些特定装置的宽度，当成我们样式改变的切点 (breakpoint)；以手机而言，我们会选择 576px。

那麽，我们会希望怎麽改变呢？我们或许会希望整个黄色贴纸大约满版，但是和左右还是有个间距。黄色贴纸的宽高可能要差不多，看起来会和原本的版面比较像。你可能会开始很复杂的计算，不过这边先让我推荐这个很好用的相对长度单位：vmin，相当於是整个视窗最小的那个边的长度。vmin 对於调整字型大小，或者调整区块间距，都是个很好的选择。我们可能会希望整个黄色贴纸占整个手机萤幕最小边的 90%，也就是 height: 90vim；这样左右两边就抓手机萤幕最小边的 5%，至於上边也可以抓个 5%，所以就是 margin: 5vmin 0 0 5vim 就可以。这样计算起来，整个橘色贴纸的高度就会是 765vmin。

这些改变的样式，会写在 @media 後面的花括弧当中，所以看起来会像这样：

@media screen and (max-width: 576px){
  .orange{
    height: 765vmin;
    width: 100vw;
    margin: 0;
  }
  .yellow{
    width: 90vmin;
    height: 90vmin;
    margin: 5vmin 0 0 5vmin;
  }
}

这个 @media 的写法，有个炫炮的术语，叫作「媒体查询」(media query)。另外，值得注意的是，这段媒体查询的样式，必须写在当中涵盖到的选择器类别之後；因为在整份 .css 档案当中，比较後面才指定的样式，会覆盖掉前面指定过的样式。因此，假使我们把媒体查询的样式，写在原本的样式之前，我们的浏览器就会用原本的样式，盖掉媒体查询的样式，看起来就会毫无改变罗！

当我们把这段媒体查询的样式，加在原本贴纸簿的样式中以後，我们使用手机打开这个 CodePen 页面，就会发现排版方式改变罗：
https://codepen.io/LogosChen/pen/JjJLZzJ
这个结果在嵌套的 CodePen 中比较看不出来，建议是直接使用手机打开另一页。

你可能会说，天啊，每次都要跑去手机看也太麻烦了吧!? 而且平板和手机种类这麽多，我要怎麽确定我写的成果在每种平板和手机上面看起来长怎样!?

没错，所以发展者工具很贴心地提供了我们看各种装置的功能：

只要点选左上角红圈处的按钮，右边就会出现响应式的选单，可以模拟各种不同设备上看到的网页样貌罗！不过 CodePen 因为嵌套的关系，所以即使是 full mode 全萤幕模式，看起来还是不太正确。所以会需要另外把档案下载下来 (还记得在哪吗？在右下角的 Export 喔！)，然後直接打开档案，这样看到的就会是正确的罗！

今天我们大致上介绍了响应式网页的基础设置方式，不过我们距离真正的响应式还有些距离。大家可以想想，要达到真正在各种设备上都提供使用者良好的体验，除了今天介绍的：

1. 按照设备宽高改变区块宽高；以及
2. 按照设备宽度改变排版方式
   以外，我们还需要怎麽作呢？

想一想：使用发展者工具检查看，底下这些网页，那些有作响应式设计呢？假使有，它们在哪些地方作了不同设备间的改变呢？这些改变是否真的带来较好的体验，又有哪些地方可以改进呢？

1. 国立台湾师范大学双语教学研究中心
2. 国立台湾大学
3. 苹果台湾