关于移动端border 1像素在不同分辨率下边显示粗细不一样的处理
最近开发发现一个很有趣的问题 就是我如果给一个元素加上一个像素的 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像素在不同分辨率下边显示粗细不一样的处理的更多相关文章
- filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行
filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行
- 第119天：移动端：CSS像素、屏幕像素和视口的关系
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
- 移动端border：1px问题解决方案
了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素, 比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px; 所以当我们 ...
- 移动端web之像素基础
px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt :device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算 ...
- stylus 移动端边框1像素问题解决方案
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 ...
- 响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- 高版本teamview的成为被控制端时，会一直出现“正在初始化显示参数”
故障现象:高版本teamview的成为被控制端时,控制端会一直出现“正在初始化显示参数”,如图是teamview13作为服务器端,控制端连接一直出现这个情况 做好的解决办法: 把被控制端的teamvi ...
- 移动web开发之屏幕三要素
× 目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话 实际上,并没有人提过屏幕三要素这个词,仅是我关于移动web开发屏幕相关部分总结归纳的术语.屏幕三要素包括屏幕尺寸.屏幕分辨率和屏幕像素 ...
随机推荐
- iOS中的MD5(base64)加密
MD5(base64)是一种结合MD5摘要和base64编码的密文处理方式,加密后的结果为24位字符串,且后两位为==,例如:1的加密结果为xMpCOKC5I4INzFCab3WEmw==. 下面是加 ...
- Ubuntu下eclipse不能新建java项目 java project的解决办法
在ubuntu系统中,装了eclipse,打开过,后来装了JDK,却不能新建java项目.重装了几遍eclipse也没有用. 原因分析: 之所以新建找不到java项目是因为eclipse有残留文件导致 ...
- Java：网络编程之应用实例
1.聊天 编写一个聊天程序,有收数据的部分和发数据的部分. 这两部分需要同时执行,那么就需要多线程技术. 一个线程控制发送. 一个线程控制接收. 因为收和发动作是不一致的,所以要定义两个run方法,而 ...
- django发送邮箱
要用django发送邮箱之前需要在setting中配置一下 EMAIL_HOST = 'smtp.qq.com' EMAIL_PORT = 25 EMAIL_HOST_USER = 'xxx@qq.c ...
- Http协议三次握手过程
Http协议三次握手过程 TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: ...
- leetcode题解：Valid Palindrome（判断回文）
题目: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ig ...
- pl/sql（2）
1.存储过程 (1)存储过程的创建及改动 语法: CREATE [OR REPLACE] PROCEDURE procedure_name [(parameter_name [IN | OUT | I ...
- 9. 使用JdbcTemplate【从零开始学Spring Boot】
转载:http://blog.csdn.net/linxingliang/article/details/51636998 整体步骤: (1) 在pom.xml加入jdbcTemplate的依赖: ...
- 使用RTTI为继承体系编写”==”运算符
转载请注明出处:http://www.cnblogs.com/inevermore/p/4012079.html RTTI,指的是运行时类型识别技术. 先看一个貌似无关的问题: 为继承体系 ...
- STL源代码剖析 容器 stl_list.h
本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie list ----------------------------------------- ...