• home > webfront > style > css3 >

    Retina真实还原1px边框的解决方案

    Author:zhoulujun@live.cn Date:

    业务中碰到了一个厉害的 UI 妹纸, 因为边框的 1px border 会被渲染成 2px(物理像素), 因此看起来会比较粗,问题抓了我很久, , UI 妹纸就说不行! 一定要改!你可以那下面的图干她。说,你看到没有,改毛线啊@!!!

    射鸡师给你设计图是这样的!

    1px边框 手机屏幕

    然后你 boder:1px solid #ccc,然后到手机上一看,又粗又大,又长

    然后,测试的妹子,受不了了……

    然后,你说是的啊
    ……

    像鸡巴的岩石

    于是,你一张图片上去一看……

    确实,不对呀!

    <img src="img/bg.png" style="position: fixed;top:0;left: 0;width: 100%;z-index: 999;opacity: .5;">


    66666666.jpg

    然后,怎么办了呢


    第一:你想到的是:

    设计图是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像素图片,里面只有像素;

    border-base64 手机1px边框图片

      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边框的解决方案》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2016_0305_7678.html