移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下：

一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>解决1px边框问题</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

    <style>

        .line {position:relative;}

        .line:after {width:%;height:%;position:absolute;top:;left:;z-index:;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin: ;transform:scale(0.5);transform-origin: ;}

        .list {width:%;margin:auto;list-style:none;padding:;}

        .list:after {border:1px solid #ccc;border-radius:10px;}

        .item {padding:10px;}

        .item:after {border-bottom:1px solid #ccc;}

        .item:last-child:after {display:none;}

    </style>

</head>

<body>

<ul class="list line">

    <li class="item line">item001</li>

    <li class="item line">item002</li>

    <li class="item line">item003</li>

    <li class="item line">item004</li>

    <li class="item line">item005</li>

    <li class="item line">item006</li>

    <li class="item line">item007</li>

    <li class="item line">item008</li>

    <li class="item line">item009</li>

    <li class="item line">item010</li>

</ul>

</body>

</html>

这个主要利用after伪类进行缩放。调用公共class，还是很方便的。

二、JS判断是否支持0.5px边框，是的话，则输出类名hairlines

if (window.devicePixelRatio && devicePixelRatio >= ) {

  var testElem = document.createElement('div');

  testElem.style.border = '.5px solid transparent';

  document.body.appendChild(testElem);

  if (testElem.offsetHeight == )

  {

    document.querySelector('html').classList.add('hairlines');

  }

  document.body.removeChild(testElem);

}

.hairlines .box {}

目前在用这个方法，使用很方便，无须多余的class，可惜支持的不是很好，IOS8+以上才可以。

三、box-shadow 阴影

-webkit-box-shadow: 1px 1px -1px rgba(, , , 0.5);

最先用的就是这个方法，IOS没问题。很多安卓机显示就是坨翔，黑乎乎的描边。。

四、background-image

.border {

  background-image:linear-gradient(180deg, red, red %, transparent %),

  linear-gradient(270deg, red, red %, transparent %),

  linear-gradient(0deg, red, red %, transparent %),

  linear-gradient(90deg, red, red %, transparent %);

  background-size: % 1px,1px % ,% 1px, 1px %;

  background-repeat: no-repeat;

  background-position: top, right top,  bottom, left top;

  padding: 10px;

    }

也能实现效果，使用很不方便

五、图片

.border-image{

    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==")   stretch;

border-width: 0px 0px 1px;

}

显示效果有点模糊，而且万一以后要修改个颜色，那不坑爹了。

所以，目前推荐第一种方法。

解决CSS移动端1px边框问题的更多相关文章

  1. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  2. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  3. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  4. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  5. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

  6. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  7. 解决移动端1px边框问题的几种方法

    1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...

  8. css 移动端1px更细

    1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div clas ...

  9. 移动端1px 边框完整方案（四个方向）

    使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t ...

随机推荐

  1. SQLLDR记录数与文本记录数比较

    我们平时都用sqlldr进行将文本数据加载到数据库,但是有时候由于数据问题导致入库率不能达到100%,因此我们要检测是否存在不能入库的数据记录.以下shell脚本就是统计文本中记录数和数据库中记录数是 ...

  2. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  3. C++ 表达式

    <C++ Primer 4th>读书摘要 C++ 提供了丰富的操作符,并定义操作数为内置类型时,这些操作符的含义.除此之外,C++ 还支持操作符重载,允许程序员自定义用于类类型时操作符的含 ...

  4. 阻塞队列BlockingQueue用法

    多线程环境中,通过队列可以很容易实现数据共享,比如经典的“生产者”和“消费者”模型中,通过队列可以很便利地实现两者之间的数据共享. 假设我们有若干生产者线程,另外又有若干个消费者线程.如果生产者线程需 ...

  5. C#与数据库访问技术总结（十一）之数据阅读器（DataReader）1

    数据阅读器 当执行返回结果集的命令时,需要一个方法从结果集中提取数据. 处理结果集的方法有两个: 第一,使用数据阅读器(DataReader): 第二,同时使用数据适配器(Data Adapter)和 ...

  6. spring-mvc.xml报错cvc-complex-type.2.4.c

    添加 <!-- 定义请求处理映射HandlerMapping --> <bean id = "handlerMapping" class = "org. ...

  7. celery与mangodb搭配应用

    写作背景介绍 在celery简单应用中已经介绍了如何去配置一个celery应用,也知道怎么分离任务逻辑代码与客户端代码了.我们现在的任务是怎么把计算结果保存到数据库中,这种数据持久化是非常重要的.你一 ...

  8. 命令行将本地代码上传到github及修改github上代码

    第一步:建立git仓库 cd到你的本地项目根目录下,(这是我的细目目录) 执行git命令 git init 第二步:将项目的所有文件添加到仓库中 git add . 如果想添加某个特定的文件,只需把. ...

  9. Linux Buffers和Cached的区别(转)

    在linux下使用free命令查看内存使用情况,有buffers和cached两项,以下是它们的区别: buffers是为块设备设计的缓冲.比如磁盘读写,把分散的写操作集中进行,减少磁盘I/O,从而提 ...

  10. Category和Extension

    转: http://blog.csdn.net/leikezhu1981/article/details/19091049 一.概述 类别是一种为现有的类添加新方法的方式. 利用Objective-C ...