CSS像素级还原设计中的33.3%

原文发表在我的博客： CSS像素级还原设计中的33.3%

最近我也做了个网易云移动端，我打算用像素级还原的方式练练手，前面的布局一路顺风顺水，但是当到了footer就是和原网页差了一像素，我在footer中怎么找也找不出任何问题，最终发现是上面图片的锅，这篇博客就来记录一下遇到这个问题。

等宽布局

CSS中没有分数的设定，导致我们在需要1/3的时候只能使用33.3%来表示，这在等宽布局的时候就会出现问题，由于剩余了0.1%的宽度，这在1000px宽度以内的网页没有任何影响，因为不足1px显示器会忽略掉这多余的0.1%，当高于1000px就会出现缝隙，当然我们可以33.33%毕竟8K屏的宽度也只有7680px宽，因为移动端的宽度低，通常33.3%就基本观察不到了区别了

等比例块

CSS中最常用且兼容性最好的等比例方式是使用百分比padding，因为padding的百分比是根据宽度来计算的，这样当宽度改变时，高度就会等比例的改变，这中方式在移动端非常常见。

/* 自适应方块 */
div{
    width: 100%;
    padding-bottom: 100%;
}

等宽布局遇上等比例块

等宽布局与等比例块在单独使用的时候都没有什么问题，也可以做到设计稿的像素级还原，但两者相遇就会出现莫名其妙的偏移，如果只是靠像素级的调整来解决偏移问题，那么在不同分辨率下的显示就会出现像素级的偏差。

.parent{
    width: 33.3%;
}
.child{
    width: 100%;
    padding-bottom: 100%;
}

上面的代码的父元素，占屏宽的33.3%他在我的手机上就是占1/3一点缝隙都没有，子元素也是一个方方正正的方形，网易云音乐移动页面的推荐歌单模块也是如此实现的

image

一切都看起来如此的美好，但当真是如此吗？

网易的网页

我的网页

我使用的grid-template-columns: 1fr 1fr 1fr;进行的均分，而原网页使用的width: 33.3%，这导致了我两者图片的细微的高度差异，而且当前模块还肉眼不可见。回到最开始我提到还原稿差得那一像素，当等宽布局时屏幕宽度就那么宽，但是当等宽遇到了等高，高度的积累就不止一个屏幕的宽度了，就是积累的多个0.11px像素爆发了小宇宙变成了1px让眼睛可以观察到，导致了我footer中的内容被挤压而在footer中找不到任何原因

总结

尽量不要使用width: 33.3%、width:33.3vw这种写法，使用的时候最好多加几个3，误差会小一点，如果是现代浏览器，能用flex和grid就尽量不要用百分比width