本文介绍了移动端开发中视口的概念，特别是针对1px边框在不同设备上显示过粗的问题。由于CSS不支持小数像素，当设计图中的1px边框在手机上显示时会变得较粗。为了解决这个问题，文章提供了一个解决方案，通过使用绝对定位和缩放来实现细腻的1px边框效果。示例代码展示了如何利用CSS技巧来重现1px边框。
提示：
本文为移动端开发学习栏目：移动端开发学习01： viewport视口的概念02——1px问题
移动端开发学习01： viewport视口的概念02——1px问题
# 视口的概念 ## 1px的问题
但是我们需要明白一件事：css不支持小数！
所以UI设计的设计图如果设计了1px的边框，在手机上缩小呈现时，由于css最低只支持显示1px大小，导致边框太粗的效果。
这边是我们要聊的1px的问题
举例
1px问题针对不是单独的1px，而是所有的奇数单位数量的像素值。
以下提供一种解决方法。
<body>
<style>
#app{
height: 200px;
width: 200px;
border: 1px solid red;
}
#app2{
height: 200px;
width: 200px;
position: relative;
}
#app2:after{
content: '';
position: absolute;
top:0;
left: 0;
height: 200%;
width: 200%;
border: 1px solid blue;
transform: scale(.5);
transform-origin: left top;
}
</style>
<div id="app">
</div>
<div id="app2"></div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
