分类： 胡思乱想

发布于

Vite 开发默认端口为什么改为 5173

闲来无事，突然回想起这个以前就在大脑中一闪而过的疑问，隐约记得当时vite官方说法是为了避开常用端口范围，但，为什么要选择 5173 这个有点“毫无亮点”的端口呢，还有什么其他原因吗？

我眼睛盯着 Vite 这个单词，脑中想着5173，忽然我似乎明白了：

V  ->  罗马数字5
i  ->  1
t  =>  7
e  =>  3

这不就是黑客常用的起名方式吗？

为了验证我的猜测，我搜了一下 Vite 的 issue，发现果然有网友跟我想法一致：
https://github.com/vitejs/vite/pull/8148#issuecomment-1335439757

不过最后没有找到确切的证据，但上面的猜测离正确答案应该也是八九不离十了吧。

发布于

理解 grid 布局中的长度单位 fr

CSS 中有很多的长度单位，fr 也是其中之一。

fr 单位专用于 grid 布局，意为 fraction（分数），额，好像也不是很好理解~

对比 px（像素）、em（文字）、vw（窗口），fr 好像缺了一个中文名字，来帮助大家理解。

所以我自告奋勇，凭借对 grid 布局还自觉得比较理解的基础上，给 fr 起了一个中文名字：份（儿），代表占剩余空间份数，这个剩余空间是指除去已知的宽度（包括px、%、grid 间隔等）之后的剩余空间。

读音相近，意思也差不多，我个人对这个名字还是比较满意的~

grid-template-columns: 150px 1fr;

//grid 容器分为了2列，第一列宽度150px，第二列占剩余空间1份儿，因为剩余空间只分成了1份儿，所以第二列也就是全部剩余空间。这种情况下，第二列写 100fr 也是相同的效果。
grid-template-columns: 150px 2fr 3fr;

//grid 容器分为了3列，第一列宽度150px，第二列占剩余空间（100% - 150px）的2份儿，第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿，第二列占2份儿，第三列占3份儿。

怎么样，是不是觉得 fr 很好理解了。