移动端1px问题
.component-confirm__buttons {
border-top: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
}
造成边框变粗的原因
其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。
解决边框变粗的6种办法
1、0.5px边框
在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Connor 讲到关于“retinahairlines”(retina 极细的线):在retina屏上仅仅显示1物理像素的边框,开发者应该如何处理呢。
他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框:
0.5px边框
额的神呐!so easy! 果真如此吗?这样还不够(WWDC幻灯片通常是“唬人”的),但是相差不多。
问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,还有 Android 设备。
解决方案:
解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框,如果可以,给html标签元素添加个class。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// 脚本应该放在内,如果在里面运行,需要包装 $(document).ready(function() {})
然后,极细的边框样式就容易了:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
优点:
缺点:
2、使用border-image实现
准备一张符合你要求的border-image:
底部边框
样式设置:
.border-bottom-1px {
border-width: 0 0 1px 0;
-webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
border-image: url(linenew.png) 0 0 2 0 stretch;
}
上文是把border设置在边框的底部,所以使用的图片是2px高,上部的1px颜色为透明,下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border,可以使用下面的border-image:
上下边框
样式设置:
.border-image-1px {
border-width: 1px 0;
-webkit-border-image: url(linenew.png) 2 0 stretch;
border-image: url(linenew.png) 2 0 stretch;
}
到目前为止,我们已经能在iphone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:
.border-image-1px {
border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border-image-1px {
border-bottom: none;
border-width: 0 0 1px 0;
-webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
border-image: url(../img/linenew.png) 0 0 2 0 stretch;
}
}
优点:
缺点:
- 修改颜色麻烦, 需要替换图片
- 圆角需要特殊处理,并且边缘会模糊
3、使用background-image实现
background-image 跟border-image的方法一样,你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
样式设置:
.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
优点:
缺点:
- 修改颜色麻烦, 需要替换图片
- 圆角需要特殊处理,并且边缘会模糊
4、多背景渐变实现
与background-image方案类似,只是将图片替换为css3渐变。设置1px的渐变背景,50%有颜色,50%透明。
样式设置:
.background-gradient-1px {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
background-size: 100% 1px;
}
优点:
缺点:
5、使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果
样式设置:
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点:
缺点:
6、viewport + rem 实现
同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时,输出viewport:
在devicePixelRatio = 3 时,输出viewport:
```html
这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
对于这种方案,可以看看《使用Flexible实现手淘H5页面的终端适配》
优点:
缺点:
7、伪类 + transform 实现
对于老项目,有没有什么办法能兼容1px的尴尬问题了,个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。
单条border样式设置:
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
四条boder样式设置:
.scale-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
最好在使用前也判断一下,结合 JS 代码,判断是否 Retina 屏:
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'scale-1px';
}
优点:
- 所有场景都能满足
- 支持圆角(伪类和本体类都需要加border-radius)
缺点:
- 对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
移动端1px问题的更多相关文章
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- 移动端1px细线解决方案总结
现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...
- 移动端1px细线解决方案--利用transform缩放方式
移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...
- 移动端1px边框伪类宽高计算
移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...
- 目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...
- 移动端1px
移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...
- 移动端1px问题处理方法
在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而 ...
- 移动端1px的解决办法之styled
做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' co ...
- 移动端1px边框实现
问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...
- 移动端1px边框问题
用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...
随机推荐
- 使用GeoServer导出地图数据GeoJSON并应用
在项目中,需要使用乡镇街道的地图边界,之前一直使用的是百度地图或Echarts地图,其没有这部分行政区的数据,需要在第三方购买数据,其提供的是shp文件 主文件:counties.shp 索引文件:c ...
- MySQL数据库的各种存储引擎详解
原文来自:MySQL数据库的各种存储引擎详解 MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用: MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB ...
- mysql 5.6升级到5.7.22
下载对应的包 wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2.12-x86_64.tar 备份数据 ...
- python学习第3天
03 int 十进制与二进制之间的转换04 bool 05 str python中凡是用引号引起来的都是字符串 1,存储相对少量的数据. 2,描述信息. 1,bool str int 三者之间的转换 ...
- Laravel-Excel 导入 Excel 文件----为什么只获取到最后一行数据?
### 今天使用了Laravel-Excel 到类文件,想做一个excel 文件到导入和导出,但是看了 官方到文档示例,自己做了一下,发现 只取到到最后一行到数据, 有点摸不着头脑! 网上找了一下, ...
- 使用FreeRTOS进行性能和运行时分析
在MCU on Eclipse网站上看到Erich Styger在2月25日发的博文,一篇关于使用FreeRTOS进行性能和运行分析的文章,本人觉得很有启发,特将其翻译过来以备参考.当然限于个人水平, ...
- Oracle12c从入门到精通(第二版) PDF 下载
一:下载地址: 二:本书图样 三本书目录 前言 第一章 Oracle数据库概述 第二章 Oracle在Windows 8上的安装与配置 第三章 SQL基础 第四章 Oracle PL/SQL及编程 第 ...
- Centos7 设置静态IP地址
一: 修改网卡配置文件(操作前先备份一下该文件),/etc/sysconfig/network-scripts/ 具体操作如下: 1:进入修改目录 [root@localhost ~]# clear ...
- Confluence 6 外部参考
一个外部参考的意思是任何站点链接到你 Confluence 的实例.任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考. 在默认的情况下,外部 ...
- Confluence 6 配置白名单
Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏,HTML 包含宏和小工具中的内容. 如果一个内容被添加到 Confluence 系统中,但是这个 URLs ...