css - 移动端0.5px，除了scale(0.5)和background-image解决方法还有啥？

问题描述

问 题

如图，今天遇到这么一个问题，设计师给的1px，在ios上变成了2px，安卓我不知道，如果就ios这样怎么区分，写hack?
搜索了下有这么两种办法：
一个是transform: scale(0.5)；
一个是当做background。
但是我觉得都不优雅，有没更好的办法。
对了，0.5px兼容性如何。

解决方案

除了在这里提供的方式以外，个人比较偏爱的是svg background的方式：

<style>
    .test { width: 100px; height: 100px; margin: 10px; }
    .test1 { border: 1px solid #000; }
    .test2 { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='0' stroke='black' stroke-width='1'/><line x1='0' y1='0' x2='0' y2='100%' stroke='black' stroke-width='1'/><line x1='100%' y1='0' x2='100%' y2='100%' stroke='black' stroke-width='1'/><line x1='0' y1='100%' x2='100%' y2='100%' stroke='black' stroke-width='1'/></svg>") ; }
</style>
<div class="test test1"></div>
<div class="test test2"></div>

原因是svg的1像素还真的是1物理像素。

这篇关于css - 移动端0.5px，除了scale(0.5)和background-image解决方法还有啥？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！