Day 10：「伸缩自如的，橡胶...」- 断点 / RWD

大家昨天的作业有写吗？
应该写得很开心吧 XD

是啊，毕竟可以用这麽简单的方式来完成，
就能触发 hover 之类的状态然後改变样式。
这可是原本纯 CSS、Sass 等做起来会很累的事情呢！

其实今天的断点 / RWD 要介绍的功能只有一个，
而且用法和昨天一样是加上一个前缀词即可。

不过特别一点的是，我们来结合一下昨天的内容，
一起再来回顾一次 Day 2 所写的一～大～篇～原理吧！

先看一下昨天做的 hover 功能：

最简单的 hover 变色功能，
昨天用 Tailwind 实作起来超级方便快速。

但，纯 CSS 和 SASS 呢？

// pure css
.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}
.box:hover {
  background: #EBEBEB;
}

// scss
.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
  
  &:hover {
    background: #EBEBEB;
  }
}

看起来没什麽问题 ... 吗？
不！ 这问题可大了！

没发现 Tailwind 的 hover 可以一行解决吗？
因为我们在 Day 2 中所提到的，其实 Tailwind 的语法在 css 中其实是这样的：

.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}

.hover\:bg-light-gray:hover {
  background: #EBEBEB;
}

没错，就是用跳脱字元来达成 hover:bg-light-gray 这个 class。 这也是为什麽可以写在同一行的原因，但你会觉得这些若是都要自己定义，太累了。

这也是我们在 Day 2 长篇大论中讨论过的，同样的这些东西在 CSS、Sass 中都需要自己写，但 Tailwind 已经把这些功能都是先预定好了，只要用即可。 如果里面有些功能找不到，可以透过 Tailwind 自定义功能来帮你生成所有你可能会用到的 class。

所以同理，RWD 断点功能的实现，我们先看看纯 CSS 的写法：

.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}

@media (min-width: 768px) {
  .box {
    background: #FFEBEB;
  }
}

原本也须要分开写的断点功能，现在也可以写在一起罗，我们下面会介绍如何完成～

其实当初写 Day 2 的用意就是让你先看过大量的原理和优缺点分析，接着你一天一天开始了解、练习後，这时候在回去翻翻 Day 2 的内容，你会更有感！

好啦～这些杂谈结束了。
我们就开始罗！ 看我们如何一行搞定 RWD！
 

材料包

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="">
    sm
  </box>
  <box class="">
    md
  </box>
  <box class="">
    lg
  </box>
</div>

材料包在这里

但今天不只一个材料，因为功能很简单，
不过我们先来完成这个吧！
 

断点 (breakpoints)

藉由断点这个变化模式当前缀词，我们可以设定 / 改变 元素在特定断点时的样式，例如 md:w-full 功能是画面宽度大於 768 px 时元素宽度会设定为全满。

以下是预设可以使用的断点变化模式前缀：

• sm: (640 px)
• md: (768 px)
• lg: (1024 px)
• xl: (1280 px)
• 2xl: (1536 px)
   

上面这些断点所代表的数字皆是萤幕最小宽度，也就是萤幕宽度必须在这个数字以上才会触发断点的变化模式。

现在直接来实作，我们希望方块 sm 在小型萤幕尺寸 (small) 以上时能够变为黄色且宽度全满，那就在方块 sm 上使用 sm:bg-yellow-500 以及 sm:w-full，以使萤幕宽度在 640 px 以上 (含 640 px) 时能够让样式生效：

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="sm:bg-yellow-500 sm:w-full">
    sm
  </box>
  <box class="">
    md
  </box>
  <box class="">
    lg
  </box>
</div>

在宽度达到 640 px 之前

宽度达到 640 px 以上时

大功告成！
这样就可以控制不同萤幕宽度时的样式变化了。

我们接着来把 md 和 lg 方块都完成吧！ 以此类推，在 md 方块上加 md:bg-yellow-500 md:w-full，在 lg 方块上加 lg:bg-yellow-500 lg:w-full：

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="sm:bg-yellow-500 sm:w-full">
    sm
  </box>
  <box class="md:bg-yellow-500 md:w-full">
    md
  </box>
  <box class="lg:bg-yellow-500 lg:w-full">
    lg
  </box>
</div>

萤幕宽度到达 768 px 时：

萤幕宽度到达 1024 px 时：

可以，就是这样没什麽难度。
我把做完的放在这里，去玩玩效果吧！

我们接下来，就来挑战实际的例子。
 

实际案例

让我们来看看这个实际案例，这是一个兔兔打算把这个做成一套课程来卖的平行时空，这边是兔兔的网站上的产品卡片，

这里是原始码：

<product class="flex flex-col gap-2">
  <img class="rounded-lg" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件开发</span>
    <span class="text-sm">
      相信有在接触前端领域的人或多或少都会听过 Tailwind CSS，或是有一些人已经对它很熟悉、甚至是有用过了。
      Tailwind 是一个 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

实际的例子在这里哦：点我前往

现在兔兔希望在小型萤幕宽度 640 px 以上把卡片的呈现方式改为横向的：

那麽现在，该怎麽做呢？

首先我们如果需要把直向切为横向的话，要先注意到它排版的方式。这边是用 flex 排版，且使用 flex-col 功能来使子元素直向排版，所以我们必须在萤幕宽度 640 px 以上时改为 flex-row，那就把 sm:flex-row 加在最外层，加了之後会发现其实卡片是有指定宽度的，所以再加上一个 sm:w-full 来让宽度变成全满：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full">
  <img class="rounded-lg" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件开发</span>
    <span class="text-sm">
      相信有在接触前端领域的人或多或少都会听过 Tailwind CSS，或是有一些人已经对它很熟悉、甚至是有用过了。
      Tailwind 是一个 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

加完之後就会看到这个惨状 ...

摁，因为图片太～大了，所以我们这边要来改变一下图片的大小。把图片的 img 标签加上 sm:h-36 来使在小型萤幕尺寸以上时高度为 9 rem：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full">
  <img class="rounded-lg sm:h-36" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件开发</span>
    <span class="text-sm">
      相信有在接触前端领域的人或多或少都会听过 Tailwind CSS，或是有一些人已经对它很熟悉、甚至是有用过了。
      Tailwind 是一个 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

为图片加上高度之後，看起来马上就有模有样了起来。

但别以为这样完成了！
图片、文字等等的间距还不太够，就是还不够令人舒适，
所以这种时候就需要做微调。

在图片和右边的文字叙述中，需要再多点空隙，我们再最外层加上 sm:gap-3，但右边的标题及商品描述之间的距离还能再大一点来方便阅读，所以我们在标题上再加个 sm:mb-1 来把其他东西往下推：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full sm:gap-3">
  <img class="rounded-lg sm:h-36" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold sm:mb-1">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件开发</span>
    <span class="text-sm">
      相信有在接触前端领域的人或多或少都会听过 Tailwind CSS，或是有一些人已经对它很熟悉、甚至是有用过了。
      Tailwind 是一个 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

最後出来的效果就是这样啦～！ 我放在这里。

差不多这样就行了，但就是抓住刚刚那种感觉，在做 RWD 的时候虽然功能少少的就是不断应用那些变化模式，但其实要注意的小细节非常之多，像文字大小、图片大小、阴影等等全部都是需要注意的要素。

不过，这边就再来谈个很重要的东西，这也是关乎於为何 Tailwind 的断点是从手机开始数，也就是为何我们要不断改写萤幕宽度变大时的样式设计。
 

行动装置优先 (mobile-first)

所谓的行动装置优先就是先做手机的萤幕尺寸开始设计、撰写。而这是个趋势。 会有这个趋势的出现不但是因为手机用户日渐增多 (现在是非常多)，还有手机萤幕的范围能显示的资讯量比起电脑萤幕实在是少太多太多了！

还有就是，因为手机的版面空间较小，所以设计上会遇到的问题、样式呈现也较多，但如果把手机画面设计好，放大到电脑萤幕时也不会出现那麽多的排版问题，但别因此而偷懒，你还是应该要针对各萤幕尺寸做最适合的设计。

再来最後就是，手机的操作方式与电脑不相同，还有手机的性能并不如电脑 (但现在不一定)，所以必须在操作方式及动画丰富度上做调整。

你可能会觉得，上面这些也可以从大萤幕慢慢设计到小萤幕。 的确是可以的，但是优良好维护设计会是不断往上扩充，而非往下删减。
 

呼，今天多了好多字。
希望上面的叙述能帮你更理解一些原理及设计理念，
还有再来就是我们简单能做到 RWD 的断点变化模式啦！

讲了这麽多终於要结尾了，切记！ 作业要交啊！
然後 ...

今天也有作业哦！ XD
 

给你们的回家作业：

• 作业实施要点：
  • 试着实际案例中的样式，多增加个产品卡片。
• 功能练习
  • 前面的材料包：快去开箱
  • 做玩的成品：点我对照
• 实际案例
  • 只有手机板：快帮兔兔做 RWD
  • 已符合小萤幕：查答案
     

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 兔兔小声说 )

哈哈哈哈～买！ 都买 ... (咳！)
(兔兔念念有词的半夜惊醒)

咦！？
我刚刚不是还在洒我开课赚到的钱吗？

... 啊 ... 什麽平行时空，原来只是梦 ...