移动端视网膜(Retina)屏幕下1px边框线的解决方法
来源:互联网 发布:数据库脱机这么久 编辑:程序博客网 时间:2024/04/29 11:15
本文主要介绍几种 移动端视网膜(Retina)屏幕下1px边框线的解决方法。
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/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;border-width: 0px 0px 1px;}
优点
无
缺点
- 移动端视网膜(Retina)屏幕下1px边框线的解决方法
- 移动端视网膜(Retina)屏幕下1px边框线 解决方案 -- 不错 保留
- 移动端Retina屏幕1px边框问题
- RETINA 屏幕1px 边框实现
- 移动端Retina屏实现1px的边框
- Retina屏下的1px边框的实现
- 7种方法解决移动端Retina屏幕1px边框问题
- 7种方法解决移动端Retina屏幕1px边框问题
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
- 再谈mobile web retina 下 1px 边框解决方案
- 1px边框问题和retina屏下的background-image
- Webapp中1px边框在retina屏中变粗的问题
- retina屏 1px变宽问题的理解和解决方法
- Retina屏的移动设备如何实现真正1px的线?
- 移动端1px边框的解决方案
- 移动端1px边框的实现
- 移动端1px边框的实现
- 移动端实现1px的边框
- mfc中UpdateData的用法
- 《C++精英内参之程序员高效指南》-12-3影响效率的不良习惯之全部是ASAP
- centos7下使用yum安装mysql
- ApplicationId与PackageName的纠葛(ApplicationId versus PackageName译文)
- 斯坦福大学Andrew Ng教授主讲的《机器学习》公开课观后感
- 移动端视网膜(Retina)屏幕下1px边框线的解决方法
- 【leetcode】11. Container With Most Water
- [HNOI2004]宠物收养所
- 论文阅读:Volumetric and Multi-View CNNs for Object Classification on 3D Data
- 《C++精英内参之程序员高效指南》-12-4影响效率的不良习惯之无方案就着手
- Mac系统,上传项目到github
- LeetCode 65. Valid Number
- 下载的PPT模板有水印怎么去除?
- h264 profile