border设置1px在手机上看起来不止1像素怎么解决啊?

三块红烧肉
  • 19

似乎手机不同显示的宽度还不一样?

评论
阅读 7.7k
3 个回答

看起来不像,这种东西怎么能用感觉呢?推荐你把屏幕截屏然后放入ps中查看,看看是否如你想的一样不是1px。

  • 如果是错觉的话那没什么,我做前端的,具体好像也没碰到过。
  • 如果不是的话你打开chrome或者别的游览器的兼容手机调试下,看看

由于高清屏的特性,1px是由2×2个像素点来渲染,border:1px在Retina屏下会渲染成2px的边框
实现方式
1.图片
2.阴影
3.缩放

移动端(手机)上1像素px边框的实现方法,这里只是列出一种,自认为比较合理的方法,有其他的移动端(手机)上1像素px边框的实现方法您可以分享出来

1像素边框,在2倍屏幕上为2“占位”,3倍屏上为3“占位”,但设计师就要1“占位”

.content h1:after,
.content h2:after {
    border-top: 1px solid #bfbfbf;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
}

/* Retina 适配 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 三倍屏 适配 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.33333334);
        transform: scaleY(0.33333334);
    }
}

答案非原创,来自网络。楼主活用搜索引擎 可以解决很多问题的

宣传栏