在retina屏中实现1px border效果

街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:

从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。

注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果

首先准备一张符合你要求的border-image:

通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下:

样式设置:

.border-image-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;
    }
}

参考文档: https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md http://css-tricks.com/snippets/css/retina-display-media-query/

下面介绍一下其他方法:

  • 设置viewport 直接按照设计师提供的640px宽的设计稿来重构,然后通过控制viewport的initial-scale值为0.5进行缩放,这种方案在ios下可以完美运行(淘宝就是这么做的),但是由于android下不支持initial-scale,所以这个方案不适用于android。
<meta name="viewport" content="initial-scale=0.5,user-scalable=no"/>
  • background-image 跟border-image的方法一样,你要先准备一张符合你要求的图片:

此例是准备将border设置在底部 样式设置:

.background-image-1px {
    background: url(../img/line.png) repeat-x left bottom;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}
  • box-shadow
.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

使用box-shadow都会让线有阴影,甚至颜色变浅。但是使用box-shadow与使用border类似,代码量少,使用方便,而且可以设置圆角矩形,在精细度要求不高的情况下可以尝试使用这种方案。

  • 渐变背景 与background-image方案类似,只是将图片替换为css3渐变。 样式设置:
.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;
}

该方案不能满足1px圆角矩形。

  • 缩放 边框由一个元素来承载,将这个元素的高度(或宽度)设置为1px,然后再将该元素缩放1倍。 样式设置:
.scale-1px{
   position: relative;
}
.scale-1px:after{
   content:"";
   position: absolute;
   bottom:0px;
   left:0px;
   right:0px;
   border-bottom:1px solid #c8c7cc;
   -webkit-transform:scaleY(.5);
   -webkit-transform-origin:0 0;
}
  • 听说Firefox和Safari8已经支持0.5px的单位了,代码可以像下面这样写:
div{
   border:1px solid black;
}

@media (-webkit-min-device-pixel-ratio: 2){
 div{
    border-width:0.5px;
 }
}

不过0.5px这个单位有点过于颠覆前端开发的认识了twitter上有位哥们已经被震惊的不知所云

  • 基于border-imagetransform使用Sass的线下解决方案: Mixin:sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。
  • 基于border-image:

_onepx.scss:

[@mixin](/user/mixin) onepx($selector, $position: bottom, $color: #666, $onepxImgDirname: './img/linenew.png') {
  #{$selector} {
    border-#{$position}: 1px solid $color;
  }

  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    #{$selector} {
      border-#{$position}: none;
      @if $position == 'bottom' {
        border-width: 0 0 1px 0;
        -webkit-border-image: url($onepxImgDirname) 0 0 2 0 stretch;
        border-image: url($onepxImgDirname) 0 0 2 0 stretch;
      } @else if $position == 'top' {
        border-width: 1px 0 0 0;
        -webkit-border-image: url($onepxImgDirname) 2 0 0 0 stretch;
        border-image: url($onepxImgDirname) 2 0 0 0 stretch;
      } @else if $position == 'right' {
        border-width: 0 1px 0 0;
        -webkit-border-image: url($onepxImgDirname) 0 2 0 0 stretch;
        border-image: url($onepxImgDirname) 0 2 0 0 stretch;
      } @else if $position == 'left' {
        border-width: 0 0 0 1px;
        -webkit-border-image: url($onepxImgDirname) 0 0 0 2 stretch;
        border-image: url($onepxImgDirname) 0 0 0 2 stretch;
      }  
    }
  }
}

test.scss:

@import "onepx";

.container {
  [@include](/user/include) onepx('.myonepx', 'top', '#666', './img/linenew.png');
}

[@include](/user/include) onepx('.border-top', 'top');
[@include](/user/include) onepx('.border-bottom');

执行bat文件:

sass --scss --style expanded test.scss test.css

生成css代码:

.container .myonepx {
  border-top: 1px solid "#666";
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .container .myonepx {
    border-top: none;
    border-width: 1px 0 0 0;
    -webkit-border-image: url("./img/linenew.png") 2 0 0 0 stretch;
    border-image: url("./img/linenew.png") 2 0 0 0 stretch;
  }
}

.border-top {
  border-top: 1px solid #666666;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-top {
    border-top: none;
    border-width: 1px 0 0 0;
    -webkit-border-image: url("./img/linenew.png") 2 0 0 0 stretch;
    border-image: url("./img/linenew.png") 2 0 0 0 stretch;
  }
}
.border-bottom {
  border-bottom: 1px solid #666666;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom {
    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;
  }
}
  1. 基于transform的缩放:

_onpx.scss

[@mixin](/user/mixin) _prefixDpr($selector, $position: 'top', $pseudo: 'before', $dpr: '2') {
  @media only screen and (-webkit-min-device-pixel-ratio:$dpr) {
    @if $dpr == '1.5' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.7);
        transform: scaleY(.7);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '2' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '3' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.3);
        transform: scaleY(.3);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    }
  }
}

[@mixin](/user/mixin) onepx($selector, $position: 'top',$pseudo: 'before', $color: #666) {
    #{$selector}:#{$pseudo} {
      content: ' ';
      display: block;
      border-top: 1px solid $color;
      position: absolute;
      left: 0;
      right: 0;
    }
    #{$selector} {
        position: relative;
        &:#{$pseudo} {
          @if #{$position} == 'top'{
            top: 0;
          } @else if #{$position} == 'bottom' {
            bottom: 0;
          }
        }
    }
    [@include](/user/include) _prefixDpr($selector, $position, $pseudo, '1.5');
    [@include](/user/include) _prefixDpr($selector, $position, $pseudo, '2');
    [@include](/user/include) _prefixDpr($selector, $position, $pseudo, '3');

}

test.scss

@import "onepx";

.container {
  [@include](/user/include) onepx('.myonepx');
}

[@include](/user/include) onepx('.hello', 'bottom', 'after', '#777');

执行bat文件

sass --scss --style expanded test.scss test.css 生成css代码:

.container .myonepx:before {
  content: ' ';
  display: block;
  border-top: 1px solid #666666;
  position: absolute;
  left: 0;
  right: 0;
}
.container .myonepx {
  position: relative;
}
.container .myonepx:before {
  top: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .container .myonepx:before {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
    -webkit-transform-origin: left top;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .container .myonepx:before {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: left top;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .container .myonepx:before {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: left top;
  }
}

.hello:after {
  content: ' ';
  display: block;
  border-top: 1px solid "#777";
  position: absolute;
  left: 0;
  right: 0;
}

.hello {
  position: relative;
}

好处:可以使用习惯的sass写1px的实现方案,并且支持传参,更加灵活。

参考: http://www.topcss.org/?p=769

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4289
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

39510
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3035
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5857
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4224
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

3070
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2797
来自专栏杨龙飞前端

scrollto 到指定位置

2994
来自专栏落花落雨不落叶

canvas画简单电路图

89211
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5308

扫码关注云+社区