移动端1像素边框的问题

.border-bottom{
position: relative;
}
.border-bottom:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform-origin:0 0;
}

适配
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}

使用有局限性,一般只能用作分割线

解决移动端适配的问题的解决方案:
手淘-flexible方案
缺点:只针对IOS适配,Android机型复杂,统一设置dpr为1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,204评论 25 708
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,497评论 5 80
  • 在移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一...
    keenjaan阅读 26,911评论 9 86
  • 一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...
    nimw阅读 3,632评论 0 5
  • - 下着小雨,小周竟然没事与小姑娘争执,那都是小事,每天下雨,我思绪混乱,生活的乏力。 内心是有种说不出的感觉,祥...
    我是跋涉阅读 375评论 0 0