Implement 1px border effect on Retina display

Tencent cloud technology community – Gold digging home page continues to present cloud computing technology articles, welcome your attention!

Author: link

The Street View WAP website has a requirement to implement 1px border in the retina screen. First, take a look at the border in the output graph given by the visual:

As you can see from the visual image above, border is a very thin line. This article will show you how to use border-image to achieve a 1px border effect on a retina screen.

Note: due to hardware limitations, non-retina phones with a devicePixelRatio of 1 cannot achieve this effect

First prepare a border-image that meets your requirements:

For example, to adapt to iPhone Retina, the design draft is designed with a resolution of 640*960, and the pictures are cut out in twice the size, so that they will not be blurred and very clear when viewed on the mobile terminal. Similarly, when using border-image, make the border physical 1px as follows:

Style Settings:

.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;
}Copy the code

Above, the border is set at the bottom of the border, so the image is 2px high, the top 1px color is transparent, and the bottom 1px color is the visual border color. If you need a border at both the bottom and top of the border, use the following border-image:

Style Settings:

.border-image-1px {
    border-width: 1px 0;
    -webkit-border-image: url(linenew.png) 2 0 stretch;
    border-image: url(linenew.png) 2 0 stretch;
}Copy the code

So far, we’ve been able to display a 1px border on the iPhone. However, we found that this method did not display the border on the non-retina screen, so we used Media Query to make some compatibility with the following styles:

.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 0stretch; }}Copy the code

Reference documents: github.com/AlloyTeam/M… Css-tricks.com/snippets/cs…

Here are some other methods:

Set the ViewPort to refactor directly from the 640px wide design provided by the designer, and then scale the viewport with an initial-scale value of 0.5. This works perfectly on ios (as taobao does). However, since Initial-Scale is not supported on Android, this solution is not suitable for Android.

<meta name="viewport" content="Initial - scale = 0.5, the user - the scalable = no"/>Copy the code

Background-image is the same as border-image. You should first prepare an image that meets your requirements:

This example is ready to set the border at the bottom of the style setting:

.background-image-1px {
    background: url(.. /img/line.png) repeat-x left bottom;-webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}Copy the code

box-shadow

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}Copy the code

Using box-shadow will cause lines to be shaded and even lighter in color. However, using box-shadow is similar to using border. It has less code and is easy to use. In addition, you can set rounded rectangles.

The gradient background is similar to background-image except that the image is replaced with a CSS3 gradient. Style Settings:

.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;
}Copy the code

The scheme does not satisfy 1px rounded rectangles.

The scale border is carried by an element, set the height (or width) of the element to 1px, and then scale the element by 1. Style Settings:

.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;
}Copy the code

I’ve heard that Firefox and Safari8 support it0.5 px.The code can be written as follows:

div{
   border:1px solid black;
}

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

But the 0.5px unit is a bit too subversive for front-end development. One guy on Twitter was shocked and confused

Based on theborder-imageandtransformOffline solutions using Sass:

Mixin: Sass uses @mixin to declare mixing. You can pass parameters that start with a $sign and separate multiple parameters with commas. You can also set default values for parameters. Declared @mixins are called via @include.

Based on the border – the image:

_onepx.scss:

@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; }}}}Copy the code

test.scss:

@import "onepx";

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

@include onepx('.border-top', 'top');
@include onepx('.border-bottom');Copy the code

Execute bat file:

sass –scss –style expanded test.scss test.css

Generate CSS code:

.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 0stretch; }}.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 0stretch; }}.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 0stretch; }}Copy the code

Transform-based scaling:

_onpx.scss

@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 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 _prefixDpr($selector, $position, $pseudo, '1.5'); @include _prefixDpr($selector, $position, $pseudo, '2'); @include _prefixDpr($selector, $position, $pseudo, '3'); }Copy the code

test.scss

@import "onepx";

.container {
  @include onepx('.myonepx');
}

@include onepx('.hello', 'bottom', 'after', '#777');Copy the code

Execute bat file

Sass — SCSS –style expanded test.scss test.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;
}
.hello:after {
  top: 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .hello:after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
    -webkit-transform-origin: left bottom; }} @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .hello:after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: left bottom; }} @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .hello:after {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: left bottom; }}Copy the code

Benefits: You can use the customary sass to write 1px implementations, and support parameter passing, more flexible.

Reference: www.topcss.org/?p=769 thanks to tutor donaldyang for your guidance.

Timeline: sharpP adaptive image technology based on CDN, a tool for CI page performance optimization

Has been authorized by the author tencent cloud community released, reproduced please indicate the article source The original link: www.qcloud.com/community/a… Get more Tencent mass technology practice dry goods, welcome to Tencent cloud technology community

Implement 1px border effect on Retina display

Related Posts

My JS algorithm climb pit journey – move zero

Introduction and implementation of Object.create

[Luffy]_leetcode-1721- Switch nodes in the linked list