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 很好理解了。