Retina真实还原1px边框的解决方案
射鸡师给你设计图是这样的!
成都创新互联主营高县网站建设的网络公司,主营网站建设方案,app软件开发,高县h5重庆小程序开发搭建,高县网站营销推广欢迎高县等地区企业咨询
然后你 boder:1px solid #ccc,然后到手机上一看,又粗又大,又长
然后,测试的妹子,受不了了……
然后,你说是的啊
……
于是,你一张图片上去一看……
确实,不对呀!
然后,怎么办了呢
第一:你想到的是:
设计图是750px,然后在iphon6上显示是375px
因为retina下1个 CSS 像素对应2个物理像素(多数是2个), 那么我们只需要想办法把border的宽度变为0.5px, 那么展现就是1个物理像素了.
那我设置
@media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi), (min-resolution: 2dppx), (-ms-high-contrast:active), (-ms-high-contrast:none) { *{ border-width: .5px; } }
然后,其它屏幕,不整除呢……0.x0x px
^^
这个有点扯蛋::因为,像素的定义:1px,就是显示的最小单位
定义:
像素是指基本原色素及其灰度的基本编码。[1] 像素是构成数码影像的基本单元,通常以像素每英寸PPI(pixels per inch)为单位来表示影像分辨率的大小。
例如300x300PPI分辨率,即表示水平方向与垂直方向上每英寸长度上的像素数都是300,也可表示为一平方英寸内有9万(300x300)像素。[2]
巴拉拉,省去xxxx万字哈……
我不喜欢科普哈!!!
然后,又怎么办呢!
我用图片:
1.BASE64:2像素图片,里面只有像素;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…hZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC); background-position: 0 0; background-repeat: repeat-x; background-size: 1px 1px;
2.渐变背景图片:
.border_top { background-image: -webkit-linear-gradient(right,transparent 50%,#999 50%); background-image: linear-gradient(to right,transparent 50%,#999 50%); background-size: 1px 100%; background-repeat: no-repeat; background-position: center right; border-top: 0 none; padding-top: 1px; } //下面是sass版本
@mixin boderHash($color:#efefef,$direction:"all"){ background-repeat: no-repeat; @if($direction=="all"){ border:none; padding: 1px; background-image: -webkit-linear-gradient(top, $color 50%, #999 50%), -webkit-linear-gradient(right, transparent 50%, $color 50%), -webkit-linear-gradient(bottom, transparent 50%, $color 50%), -webkit-linear-gradient(left, transparent 50%, $color 50%); background-image: linear-gradient(to top, transparent 50%, $color 50%), linear-gradient(to right, transparent 50%, $color 50%), linear-gradient(to bottom, transparent 50%, $color 50%), linear-gradient(to left,transparent 50%, $color 50%); background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-position: top center, right center, bottom center, left center; }@else { border-#{$direction}: 1px solid ; background-image: -webkit-linear-gradient($direction, transparent 50%, $color 50%); background-image: linear-gradient(to $direction, transparent 50%, $color 50%); @if($direction=="left" or $direction=="right"){ background-size: 100% 1px; } @if $direction=="top" or $direction=="bottom"{ background-size: 1px 100% ; } } }
第三:使用,伪类元素。
然后绝对定位:个人觉得性能消耗太大1
所以也不不再唧唧歪歪
其实:
我们知道的网站。都没有使用这些东西
不想,看图
如果有人叼你!!
你直接那这些图,干她!!
转载请注明文章来处:Retina真实还原1px边框的解决方案 - css3,css3动画,css3新特性 - 周陆军的个人网站
网站题目:Retina真实还原1px边框的解决方案
当前链接:http://pwwzsj.com/article/jecgph.html