移动端1px兼容问题

最新推荐文章于 2021-10-11 14:28:22 发布

遗世独立hws

最新推荐文章于 2021-10-11 14:28:22 发布

阅读量316

点赞数

分类专栏： css 前端学习兼容性文章标签： css

本文链接：https://blog.csdn.net/huangwensu/article/details/108778274

版权

前端学习同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

兼容性

3 篇文章 0 订阅

订阅专栏

在有的手机上border: 1px看起来很粗，设置为border: 0.5px在安卓机上默认为border: 0px；

(1)通过伪类可以解决

.retina-border {
	position: relative;
}
.retina-border::before { 
	content: ''; 
    position: absolute;
    top: 0px; 
    right: 0px; 
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;  
    box-sizing: border-box;
    pointer-events: none; 
    border-width: 1px solid #000;  
}

(2)通过SVG解决，使用postcss-write-svg这个postcss插件将css中svg函数生成的图像处理成base64。这样就可以在css文件直接调用svg函数。