APICloud：让你的APP边框显示原生的1px

最新推荐文章于 2022-04-06 21:15:00 发布

chuangfankuang0896

最新推荐文章于 2022-04-06 21:15:00 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

文章标签：开发工具

原文链接：https://my.oschina.net/Twitter/blog/526705

本文介绍了一种在APICloud中优化1px边框显示的方法，通过使用伪元素和媒体查询，使得边框在高分辨率设备上看起来更加细腻，接近原生效果。此技巧对于从Web转向移动应用开发的人员尤其有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APICloud无疑已是相当火的APP开发工具了，面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉，比如这个border。怎样让1px更细，看起来像原生的？下面教大家一个方法：

.border {
    position: relative;
    width: 300px;
    height: 200px;
}
.border:after {
    border: 1px solid #ff3300;
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .border:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5);
    }
}

如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS：特别说明

千万别漏下了pointer-events: none;要不然就没法点击了

转载于:https://my.oschina.net/Twitter/blog/526705