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

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

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

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

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  5.  <meta charset="UTF-8">
  6.  <title>0.5 border</title>
  7.  <style type="text/css">
  8.  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
  9.  ul{
  10.   position: relative;
  11.  }
  12.  li{
  13.   height: 60px;
  14.   line-height: 60px;
  15.   padding-left: 10px;
  16.   position: relative;
  17.   font-size: 20px;
  18.  }
  19.  li:after{
  20.   content: "";
  21.   display: block;
  22.   position: absolute;
  23.   left: -50%;
  24.   width: 200%;
  25.   height: 1px;
  26.   background: #ededed;
  27.   -webkit-transform:scale(0.5);
  28.  }
  29.  </style>
  30. </head>
  31. <body>
  32.  <ul>
  33.   <li>list-item1</li>
  34.   <li>list-item2</li>
  35.   <li>list-item3</li>
  36.   <li>list-item4</li>
  37.   <li>list-item5</li>
  38.   <li>list-item6</li>
  39.   <li>list-item7</li>
  40.   <li>list-item8</li>
  41.  </ul>
  42. </body>
  43. </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. Flex 布局学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Java 并发工具包 java.util.concurrent 用户指南（转）

    本文转自http://blog.csdn.net/defonds/article/details/44021605/ 感谢作者 1. java.util.concurrent - Java 并发工具包 ...

  3. 快速搭建一个restful风格的springboot项目

    1.创建一个工程. 2.引入pom.xml依赖,如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...

  4. 栅格 CSS中的循环 媒体查询

    第三天Bootstrap 模态框 1.要使用模态框,需要现在body里,添加展示模态框的html代码.此时模态框是看不见的 2.如果要显示,$(“.modal”).modal(“show”); 3.如 ...

  5. How to dynamically load directive into page

    https://stackoverflow.com/questions/23556398/how-to-dynamically-load-directive-into-page I have an h ...

  6. python获取输入参数

    python获取输入参数 学习了:https://www.cnblogs.com/angelatian/p/5832448.html import sys模块: len(sys.argv)参数个数 s ...

  7. Weblogic OutOfMemory exception的误解 -- thread limitation

    不是全部的OutofMemory exception都是内存问题... 前几天有个客户的site报了下面错误: [ERROR][thread ] Could not start thread Time ...

  8. Tomcat 高性能实现关键点

    我在这里给大家讲解下Tomcat架构设计的几个关键要素,重点从性能及高可用等几个方面来讲解: 1.技术选型 (1) BIO方式适用于连接数目比较小且固定的架构,这种方式对服务器资源要求比较高,并发局限 ...

  9. Node.js 本地Xhr取得Node.js服务端数据的例子

    本以为用XHR取Nodejs http出的一段文字很简单,因为xhr取值和nodejs http出文字都是好弄的,谁知一试不是这回事,中间有个关键步骤需要实现. nodejs http出文字显示在浏览 ...

  10. x^2 + (y-(x^2)(1/3))^2 = 1 心形方程 5.20无聊之作

    2017.05.20 一个无聊的周六,只能看别人秀恩爱.偶然间在网上看到一个有意思的方程 x^2 + (y-(x^2)(1/3))^2 = 1,据说这个方程可以绘制出一个爱心的形状.既然很无聊,就随便 ...