问题描述

通常我们实现边框的方法都是设置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. 一致性哈希算法与Java实现

    原文:http://blog.csdn.net/wuhuan_wp/article/details/7010071 一致性哈希算法是分布式系统中常用的算法.比如,一个分布式的存储系统,要将数据存储到具 ...

  2. Codeforces#262_1002

    Codeforces#262_1002 B. Little Dima and Equation time limit per test 1 second memory limit per test 2 ...

  3. Linux x64 下 Matlab R2013a 300 kb 脚本文件调试的 CPU 占用过高问题的解决办法

    (1) 系统+软件版本 CentOS 6.5 (Final), 64 位,内核initramfs-2.6.32-431.5.1.el6.x86_64, MATLAB Version: 8.1.0.60 ...

  4. 设计模式 - 模板方法模式(template method pattern) JFrame 具体解释

    模板方法模式(template method pattern) JFrame 具体解释 本文地址: http://blog.csdn.net/caroline_wendy 參考模板方法模式(templ ...

  5. Android进阶(二十三)Android开发过程之实例讲解

    Android开发过程之实例讲解 前言 回过头来审视之前做过的Android项目,发觉自己重新开发时忽然间不知所措了,间隔了太长时间没有开发导致自己的Android技能知识急剧下降.温故而知新. 废话 ...

  6. 001. Java内存中的字符编码

    Java内存中的字符编码 Unicode字符集及utf-8 .utf-16.utf-32 等字符编码方式 字符集:字符表示的数字集合,元素称为码点或码位: 字符编码:字符实际的储存表示: 码点:一个码 ...

  7. [TaskList] 省选前板子补完计划

    省选前本子补完计划 [ ] 带权并查集 [ ] 树上莫队 - UOJ58 [WC2013]糖果公园 loj2485「CEOI2017」Chase

  8. Spark记录-阿里巴巴开源工具DataX数据同步工具使用

    1.官网下载 下载地址:https://github.com/alibaba/DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlSe ...

  9. P5091 【模板】欧拉定理

    思路 欧拉定理 当a与m互质时 \[ a^ {\phi (m)} \equiv 1 \ \ (mod\ m) \] 扩展欧拉定理 当a与m不互质且\(b\ge \phi(m)\)时, \[ a^b \ ...

  10. 解决maven 找不到指定路径应该如何

    如果打开每个项目都有红x!!!解决办法: 1) 2)-->点击clean ,ok!!