搜索文章
类目归类
很多人在日常开发中会使用transform: translate(-50%, 50%)来居中弹出层,那么相信大家也会碰到与我相同的情况:有时候弹出层的内容变得模糊不清晰。
原因很简单,是因为css动画在渲染非整数的px时会出现字体模糊。上面transform内的50%是相对于自身的宽高的,所以我们就需要确保自身的宽高都为偶数。
解决办法:
.father {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}