最近开发发现一个很有趣的问题  就是我如果给一个元素加上一个像素的 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. EF执行存储工程报错 String[4]: Size 属性具有无效大小值 0。

    EF中执行存储过程报错 String[4]: Size 属性具有无效大小值 0 排查后是如下问题所致,给定的参数没有设定大小(加入红框内的就可以了) private string GetCode(MC ...

  2. JAVA常见算法题(十六)

    package com.xiaowu.demo; //猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个: //第二天早上又将剩下的桃子吃掉一半,而且又多吃了一个. //以后 ...

  3. uVa 12563 Jin Ge Jin Qu

    分析可知,虽然t<109,但是总曲目时间大于t,实际上t不会超过180*n+678.此问题涉及到两个目标信息,首先要求曲目数量最多,在此基础上要求所唱的时间尽量长.可以定义 状态dp[i][j] ...

  4. ieda常用快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  5. 配置多层NAT和端口映射实现外网访问内网

    配置多层NAT和端口映射实现外网访问内网 背景和原理 通过配置NAT可以实现内网中不能直接访问外网的主机通过NAT代理访问内网,配置方法这里不再赘述(前文有介绍).本文以两层的NAT代理做模拟,通过端 ...

  6. 2017.9.15 postgres使用postgres_fdw实现跨库查询

    postgres_fdw的使用参考来自:https://my.oschina.net/Kenyon/blog/214953 postgres跨库查询可以通过dblink或者postgres_fdw来完 ...

  7. MonoBehaviour.FixedUpdate 固定更新

    function FixedUpdate () : void Description描述 This function is called every fixed framerate frame, if ...

  8. ["1", "2", "3"].map(parseInt) 结果

    // 下面的语句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能觉的会是[1, 2, 3] // 但 ...

  9. 读jQuery源码之整体框架分析

    读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...

  10. rabbitmq 用户和授权

    官方文档 https://my.oschina.net/hncscwc/blog/262246?p=