问题描述

通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示成2px。这对于拥有像素眼的设计同事来说是无法忍受的,他们会一眼看出这边框粗了很多(真可怕,不过经历这次问题之后,感觉自己也练成了像素眼),并且在用户体验上略差,所以现在要解决的问题就是在retina屏幕下实现1px的边框。

解决方案

查找了一些资料,也对比了很多方案,个人认为这个是css的问题,所以尽量不使用js来协助较好。但是可能会有局限。下面就列举一些方案,并对比下优劣。

1.IOS8+已经支持0.5px了,所以,可以使用media query+0.5px来解决这类问题:

#box{
     border:1px solid #fff;
}
@media (-webkit-min-device-pixel-ratio: 2) {
    #box {
       border:0.5px solid #fff;
    }
}

不支持0.5px的ios7及安卓,会显示为0px,所以对于这些系统需要另外写样式。这个方案支持圆角。

2.对于devicePixelRatio >= 2的设备,在需要加边线的元素上使用after伪元素,尺寸设置为1px,然后使用transform:scale进行缩小0.5倍操作:

.border-bottom1px {
    position: relative
}
.border-bottom1px:after {
    content: '';
    position: absolute;
    left:;
    bottom:;
    width: 100%;
    height: 1px;
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom;
    background: #d7d6dc
}
@media(-webkit-min-device-pixel-ratio:2) {
    .border-bottom1px:after {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }
}

这个方案实现单条边线较合适,多条边线伪元素不够用。并且不能实现圆角边框。并且代码相对较多较分散,维护不易。

3.box-shadow

.border-bottom1px{
    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

这个方案可以实现圆角,可以实现多边框,

但是在某些机器上有阴影,很影响美观,所以一般不用。简单边框还是用2比较合适。

4.background-image

用css设置1px的image,50%透明,50%带有颜色:

.border-1px {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

可以实现单条或多条边框,圆角不能实现

5.图片

需要多加载一张图片,另外边框颜色修改的时候需要更换图片,一般不使用这个方法。

6.viewport+rem

在devicePiexlRatio=2情况下设置meta:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

再设置rem:

html {
    font-size: 20px;
}
header {
    height: 3rem;
}

将边线宽换成rem就可以。

js协助的方法类似,使用js判断UA,看是否是ios8+,是的话添加一个类。

Retina屏实现1px边框的更多相关文章

  1. Retina屏下1px border

    layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...

  2. 移动端视网膜(Retina)屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  3. retina屏实现border边框1px

    .border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...

  4. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  5. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  6. mobile web retina 下 1px 边框解决方案

    本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...

  7. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  8. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  9. 【转载】Retina屏的移动设备如何实现真正1px的线?

    文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 ...

随机推荐

  1. CF576E

    *在#里发他一直WA这道CF题,然后我就去看了看,感觉还挺有趣的,那我就在这里整理一下我的思路..毕竟一边听歌.. 题意: 给个图,每条边初始无色,每次给一个询问(e,c)表示把e涂成颜色c,如果此时 ...

  2. js Date 时间格式化的扩展

    js Date 时间格式化的扩展: Date.prototype.format = function (fmt) { var o = { , //月 "d+": this.getD ...

  3. java实现生产者消费者问题

    引言 生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,如下图所示,生产者向空间里存放数据,而消费者取用数据,如果不加以协调可能会出现以下情况: 生产者消费者图 ...

  4. 谋哥:App排行榜的秘密

    App在改变世界,改变人们的生活.       如今购物大家都用淘宝.京东,吃饭你会用饭否,看天气预报你用墨迹天气,看视频用优酷.K歌你用唱吧,聊天联系你用微信,看新闻你用今日头条等等.你的生活由你自 ...

  5. winform 加密 解密 分类: WinForm 2014-05-16 15:05 400人阅读 评论(0) 收藏

    界面显示: 加密: 解密: 代码实现: public string EncryptString(string str)         {             #region 加密程序       ...

  6. 各浏览器对 window.open() 的窗口特征 sFeatures 参数支持程度存在差异

    标准参考 无. 问题描述 使用 window.open 方法可以弹出一个新窗口,其中 open 方法的 sFeatures 参数选项在各浏览器中支持程度不一,这有可能导致同样的代码使各浏览器中弹出窗口 ...

  7. php:修改NetBeans默认字体

    在Netbeans中由于使用了Swing进行开发,所以其中界面的字体也是由Java虚拟机进行配置而不是随操作系统的.在安装完Netbeans后默认的字体大小是11px.而在Windows下的宋体最小支 ...

  8. tcp 的6个控制位

    原文:http://blog.chinaunix.net/uid-26413668-id-3376762.html TCP(Transmission Control Protocol) 传输控制协议 ...

  9. OC语言实现中等难度通讯录

    实现中等难度通讯录.需求: 1.定义联系⼈人类Contact.实例变量:姓名(拼⾳音,⾸首字⺟母⼤大写).性别.电话号码. 住址.分组名称.年龄.⽅方法:⾃自定义初始化⽅方法(姓名.电话号码).显⽰示 ...

  10. labview下载地址

    ftp://ftp.ni.com/evaluation/labview/ekit/other/downloader