提示：
本文为移动端开发学习栏目：移动端开发学习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>