最近开发发现一个很有趣的问题  就是我如果给一个元素加上一个像素的 border 在不同的分辨率的情况下显示的不同 在高清屏幕（尤其是ios 喽 不鄙视国产） 据说在6plus下会变成3px  这个我就不知道了 因为我没有。。。

那么我们换个单位行不行？ 因为移动端不用px来做 啊  对不起 你换了rem 或者em都不行（我只是测试了这两个单位）

废话不多说了  说一下解决方案

看一下我们老大 淘宝的解决方案 简单粗暴 更实用啊 

这个图片我觉得够大了  对就是用了一个宽度为1px的div来模拟的   然后我觉得这样有点浪费div的资源啊  于是我继续百度ing。。。

于是有找到了   利用定位 和after属性来做的例子

<!doctype html>

<html lang="en">

<head>

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

 <meta charset="UTF-8">

 <title>0.5 border</title>

 <style type="text/css">

 *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

 ul{

  position: relative;

 }

 li{

  height: 60px;

  line-height: 60px;

  padding-left: 10px;

  position: relative;

  font-size: 20px;

 }

 li:after{

  content: "";

  display: block;

  position: absolute;

  left: -50%;

  width: 200%;

  height: 1px;

  background: #ededed;

  -webkit-transform:scale(0.5);

 }

 </style>

</head>

<body>

 <ul>

  <li>list-item1</li>

  <li>list-item2</li>

  <li>list-item3</li>

  <li>list-item4</li>

  <li>list-item5</li>

  <li>list-item6</li>

  <li>list-item7</li>

  <li>list-item8</li>

 </ul>

</body>

</html>

哎呀  这又是一种解决方案。。 那么谁的更好一点我就不多说了  定位这个东西还是少用一点为好。。。 分不清哪一个更好但是知道都可以解决问题  至于为什么产生这样的问题 建议百度几篇不错的文章来看一下  我基本都说代码   因为我怕误人子弟。。。 如果觉得那里不对欢迎留言。。。。

关于移动端border 1像素在不同分辨率下边显示粗细不一样的处理的更多相关文章

  1. filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行

    filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行

  2. 第119天：移动端：CSS像素、屏幕像素和视口的关系

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...

  3. 移动端border：1px问题解决方案

    了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素, 比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px; 所以当我们 ...

  4. 移动端web之像素基础

    px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt :device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算 ...

  5. stylus 移动端边框1像素问题解决方案

    border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 ...

  6. 响应式设计：理解设备像素，CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  7. h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  8. 高版本teamview的成为被控制端时，会一直出现“正在初始化显示参数”

    故障现象:高版本teamview的成为被控制端时,控制端会一直出现“正在初始化显示参数”,如图是teamview13作为服务器端,控制端连接一直出现这个情况 做好的解决办法: 把被控制端的teamvi ...

  9. 移动web开发之屏幕三要素

    × 目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话 实际上,并没有人提过屏幕三要素这个词,仅是我关于移动web开发屏幕相关部分总结归纳的术语.屏幕三要素包括屏幕尺寸.屏幕分辨率和屏幕像素 ...

随机推荐

  1. sql 分组后按时间降序排列再取出每组的第一条记录

    原文:sql 分组后按时间降序排列再取出每组的第一条记录 竞价记录表: Aid 为竞拍车辆ID,uid为参与竞价人员ID,BidTime为参与竞拍时间 查询出表中某人参与的所有车辆的最新的一条的竞价记 ...

  2. Android Rx Android实战

    上一次捣蛋 RxAndroid 是今年二月份的事情了,当时 RxAndroid 还处于一个资料甚少交流难的状态,当时还特意建了一个交流群,让搞这个的人可以加进来讨论讨论,毕竟这玩意还是挺有意思的,于是 ...

  3. 【微信】微信小程序 微信开发工具 创建js文件报错 pages/module/module.js 出现脚本错误或者未正确调用 Page()

    创建报错pages/module/module.js 出现脚本错误或者未正确调用 Page() 解决方法: 在js文件中添加 Page({ })

  4. eclipse和maven生成web项目的war包的操作方法

    一.eclipse中,在需要打包的项目名上右击,然后把鼠标光标指向弹出框中的“run as”: 二.之后会看到在这个弹出框的右侧会出现一个悬浮窗,如下: 三.在上边的第二个悬浮窗鼠标点击“maven  ...

  5. python的__call__、__str__、__repr__、__init__、__class__、__name___、__all__、__doc__、__del__等魔术方法的作用

    python中,一切都是对象 在Python中,所有以“__”双下划线包起来的方法,都统称为“Magic Method”--魔术方法 1.__call__:作用是把类实例变成一个可调用对象 在Pyth ...

  6. Qt自己定义事件实现及子线程向主线程传送事件消息

    近期在又一次学习Qt的时候,由于要涉及到子线程与主线程传递消息,所以便琢磨了一下.顺便把有用的记录下来,方便自己以后查询及各位同仁的參考! 特此声明,本篇博文主要讲述有用的,也就是直接说明怎么实现,就 ...

  7. windows curl命令

    一.概述 Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景,因此这里研究下如何在windows下执行curl命令 二.下载 下载地址:https://cu ...

  8. Spark Streaming与Storm的对比及使用场景

    Spark Streaming与Storm都可以做实时计算,那么在做技术选型的时候到底应该选择哪个呢?通过下图可以从计算模型.计算延迟.吞吐量.事物.容错性.动态并行度等方方面进行对比. 对比点    ...

  9. 倍福TwinCAT(贝福Beckhoff)基础教程5.1 TwinCAT-3 读写注册表

    读写注册表和读写文件一样,里面涉及的输入类型比较复杂,需要参考官方范例 sSubKey是指注册表的路径 sValName是指注册表要写入的名值对的名称 eValType是一个枚举类型(而且不是什么常规 ...

  10. Java虚拟机对锁优化所做的努力(读书笔记)

    锁偏向      是一种加锁操作的优化手段,他的核心思想是:如果一个线程获得了锁,那么就进入偏向模式,当这个线程再次请求锁时,无须在做任何同步操作,因此在几乎没有锁竞争的场合,偏向锁是比较好的优化效果 ...