CSS

transform 导致字体模糊的解决方案

1.jpg

很多人在日常开发中会使用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;
}
朗读
版权属于:

IT帝国

本文链接:

https://www.itdiguo.cn/archives/222.html(转载时请注明本文出处及文章链接)

评论 (0)

标签云