mobile web retina 下 1px 边框解决方案
http://www.tuicool.com/articles/ZRv6bun
再谈mobile web retina 下 1px 边框解决方案
本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。
还好,时代总是进步的。也许很多人都不知道, 现在IOS8下,已经支持0.5px了。 。 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码:
但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统。
三种方案:
1、JS判断UA,是否是ios8+,是的话则输出类名hairlines,为了防止重绘,这段代码加在head里即可。
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/), version = parseInt(v[1], 10); if(version >= 8){ document.documentElement.classList.add('hairlines') } }
2、JS判断是否支持0.5px边框,是的话,则输出类名hairlines。
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); } // This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })
相比于第一种方法,这种方法的可靠性更高一些,但是需要把js放在body标签内,相对来说会有一些重绘,个人建议是用第一种方法。
3、服务端做ios版本判断,输出相应的类名
相比于JS的实现,个人更倾向于在服务端完成,这样前端也少几行代码,并且更加可靠。
如在wormhole里的实现(wormhole是nodejs环境下的一个服务端渲染模版的容器)
{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}{{set (hairlines = "hairlines")}} {{/if}} <html class="{{hairlines}}">
加上类名后,就可以针对该类名写相应的css了。比如:
div{border:1px solid #000} .hairlines div{border-width:0.5px}
也许你会问,那ios7以下和其他android机下怎么搞?我的建议是:还是维持老样,不去处理,随着时间的推移,我相信最终都会支持0.5 和 0.3 px边框的。
如果硬要兼容,怎么整?方案也有很多,稍微介绍下:
1、通过viewport + REM的方式来兼容。
目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。 淘宝M首页 就是这种方案。
在devicePixelRatio = 2 时,输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时,输出viewport
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。关于REM布局,可以参考下我上一篇文章 《移动端H5页面之iphone6的适配》
其他方案(该部分内容来源于妙净同学的分享):
2、 transform: scale(0.5)
实现方式
height:1px; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;
优点
圆角无法实现,hack代码多,实现4条边框比较闹心
缺点
只能单独使用,如果嵌套,scale的作用也会对包含的元素产生,不想要的影响,所以此种方案配合:after和:before独立使用较多,比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父元素的after、before再画2条线。
.after-scale{
position: relative; } .after-scale:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #c8c7cc; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; }
3、 box-shadow
实现方式
利用css 对阴影处理的方式实现0.5px的效果
底部一条线
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点基本所有场景都能满足,包含圆角的button,单条,多条线,
缺点
颜色不好处理, 黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现,不好用。
参考链接
4、 background-image
实现方式
设置1px通过css 实现的image,50%有颜色,50%透明
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%); background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; padding: 10px; }
优点
配合background-image,background-size,background-position 可以实现单条,多条边框。边框的颜色随意设置
缺点
如果有圆角的效果,很sorry 圆角的地方没有线框的颜色。都要写的代码也不少
参考链接
5、 用图片
实现方式
.border-image{border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/GMzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch; border-width: 0px 0px 1px; }
优点
无
缺点
也可以通过修改图片来达到圆角的效果,但是由于图片的原因,压缩过后的图片边缘变模糊了(不放大的情况下不明显),需要引用图片或者base64,边框颜色修改起来不方便。
参考: http://dieulot.net/css-retina-hairline
转载于:https://www.cnblogs.com/fang51/p/4555330.html
mobile web retina 下 1px 边框解决方案相关推荐
- 7种方法解决移动端Retina屏幕1px边框问题
造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应cs ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案 说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
- background图片不显示_一种解决Retina屏幕1px边框显示问题的方案
一.背景介绍: Retina是一种新型高分辨率的显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度:同时CSS样式表中px单位是一个相对值,并不是绝对值,实际在R ...
- 移动端Retina屏幕1px边框问题
问题:移动端开发过程中border出现问题 原因:css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反 ...
- 解决移动端Retina屏幕1px边框问题
1.0.5px边框 6.viewport+REM
- 移动端视网膜(Retina)屏幕下1px边框线的解决方法
本文主要介绍几种 移动端视网膜(Retina)屏幕下1px边框线的解决方法. 1.通过viewport + rem的方式来兼容. 目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比 ...
- 移动端1px问题解决方案
移动端1px问题解决方案 高清屏中1px线问题 在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是 ...
- 非同款!六种移动端1px “黑眼圈” 解决方案
前言 在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题. 本文默认你 ...
最新文章
- Oracle 执行计划 提示 'PLAN_TABLE' is old version 解决方法
- php版本7历史,php的版本发展历史(1995-2020)
- vue写js代码_vue.js弹出式音乐播放器特效代码
- 小程序中上传图片并进行压缩(二)
- Python绘制酷炫的弦图
- vbs整人小脚本(搞笑)
- 讲个职友集(jobui)低PV的故事(评论)
- 卷积神经网络与机器视觉,卷积神经网络图像分类
- 网卡能通过usb接口与计算机连接吗,usb网卡怎么使用 usb网卡使用方法【图文】...
- IPSec的IKEv1和IKEv2协议
- cairo填充_cairo图形库
- 使用imageIO获取和修改图片的exif信息
- linux下硬盘读写速度测试
- Anaconda创建新环境及在pycharm中的设置
- 真正借奥运雄起只有无线互联网
- ubuntu18安装oracle11g,在Ubuntu 18.04系统下快速安装Oracle Java 11的方法
- ubuntu怎么清理软件包_ubuntu清理磁盘空间的多种方法
- 【前端新手】实现ie浏览器界面兼容所遇的坑
- 电脑显示正在进行自动修复此计算机,怎么处理win10系统开机一直显示“正在准备自动修复”无法启动的操作教程...
- 蓝桥杯单片机进阶模块--NE555
热门文章
- Random Forest 实用经验(转)
- 产品经理十二时辰:内容过于真实,扎心了!
- 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
- (五)Unity插件生成
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的解决方案...
- JS生成动态表格并为每个单元格添加单击事件的方法
- TCP/IP(三):IP协议相关技术
- 从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装
- 面向对象第一单元总结
- xcode中用pods管理第三方库转