美文网首页
移动端1像素边框的问题

移动端1像素边框的问题

作者: futing | 来源:发表于2017-10-12 22:02 被阅读0次
.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

相关文章

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 移动端1像素的问题

    移动端1像素的问题 问题:一般在移动端,由于dpr(设备像素比)不为1,在PC端显示1像素的边框,在移动端其实显示...

  • 前端遇到的那些技术难点及性能优化之css篇

    移动端兼容 css篇 移动端的 1px 问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。 产生原因...

  • 一像素边框实现

    下文部分引用于移动端1像素边框问题,这篇文章写得很详细,值得一看。 为什么移动端一像素边框和pc端不一样? 其实这...

  • 移动端1像素边框问题

    移动端1像素边框问题: 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的,或...

  • 移动端适配

    移动端适配主要为了解决设计稿和实际作图的比例对应问题。 移动端响应式布局主要存在两种问题:1.1px边框问题2.像...

  • 移动端1像素边框问题

    1像素在一般屏下呈现往往没有问题,但在retina屏下则呈现比较宽,肉眼看上去不像是一像素,为了解决这个问题可以用...

  • 移动端1像素边框问题

      对于前端开发者来说,要处理这个问题,必须先补充一个知识点,就是设备的 物理像素[设备像素] & 逻辑像素[CS...

  • 移动端1像素边框的问题

    使用有局限性,一般只能用作分割线 解决移动端适配的问题的解决方案:手淘-flexible方案缺点:只针对IOS适配...

  • 移动端会遇到的边框问题

    真实经历:在之前的项目中,UI小姐姐告诉我们一位前端小姐姐说我们项目苹果手机中的边框好像不是1像素的,比1像素粗。...

网友评论

      本文标题:移动端1像素边框的问题

      本文链接:https://www.haomeiwen.com/subject/qcfayxtx.html