搜索文章
类目归类
transform 导致字体模糊的解决方案
很多人在日常开发中会使用transform: translate(-50%, 50%)来居中弹出层，那么相信大家也会碰到与我相同的情况：有时候弹出层的内容变得模糊不清晰。
原因很简单，是因为css动画在渲染非整数的px时会出现字体模糊。上面transform内的50%是相对于自身的宽高的，所以我们就需要确保自身的宽高都为偶数。
解决办法：
- 设置元素宽高皆为偶数（需要知道元素高度）
- 使用margin代替transform（需要知道元素宽高）
- 增加一个父级元素，将定位给父级，并使用flex布局使原本元素居中（不需要知道元素高度）
.father {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
