Day 10 - 宽高尺寸使用

既然昨天提到自订 spacing，width和height 也会跟着继承，今天威尔猪就来讲讲宽高的使用吧。

宽度

固定宽度

使用方式为：w-{number}，没错，後面的数值预设就是和间距一样，所以说熟悉一种，等於你熟悉了很多种。不过现在几乎都是已 RWD 为主，除非某些特定的情况，相信大多数情形下，不会去设定固定宽度的，如果一定要用到预设的固定宽度，记得数值为 4 的倍数。

响应式宽度

在 Bootstrap 宽高度预设只给我们 4 种比例，Tailwind 真的弹性很多，使用方式为：w-{fraction}，这个很直觉，就是依外层的宽度大小，内层再来分成几等份，以百分比而不是固定值来决定宽度，1/2 就是 2 等份占 1 等份，2/3 就是 3 等份占 2 等份，以此类推。Tailwind 预设已帮我们分成 2、3、4、5、6、12 等份。

这边威尔猪要提的是 width: 100%; 的写法是 w-full，而不是 Bootstrap 的 w-100。width: 100vw; 的写法是 w-screen，而不是 Bootstrap 的 vw-100，这边不得不说 Bootstrap 的写法直觉多了。

最大宽度

用法就是：max-w-{size}，而 max-w-screen-sm、md ... 的尺寸大小，跟前几篇断点的设定是一样的，如果当初断点有修改设定过，这边的尺寸也会跟着变动。那非 screen 的最大尺寸预设是另外的设定，想自行修改也是在 Tailwind.config.js 里 theme 的 maxWidth 修改，这边威尔猪就不再多做范例了。

说实话，预设这些威尔猪自己也记不住，但咱们只要记得 max-width: 100%; 的写法是：max-w-full，不是 Bootstarp 的 mw-100 就好了，因为威尔猪也很少用到其他的 class。至於 prose，我们以後再提。

最小宽度

有最大宽度肯定有最小宽度啊，不过威尔猪本身很少用到预设的这些 class，同学们只要知道 Tailwind 本身有这些设定就好了。

高度

至於高度部分，基本上和宽度大同小异，只需将 w 替换成 h 即可，但要注意几个 class 不一样或没有，例如

• ❌ 没有 { max | min }-content 的部分。
• ❌ 没有 h-screen-{ sm | md | lg | ...}，取而代之的是 { max | min }-h-screen。
• ❌ 没有 max-h-prose。

宽高数值多是多了点，但了解过後其实也没想像中复杂，因为要记住的部分就那几个 class，那咱们明天见。