移動端網膜(Retina)画面下1 px枠線ソリューション

理由:Retineスクリーンの解像度は常に通常のスクリーンの2倍であるため、1 pxの枠線はdevicePixelRatio=2のretinaスクリーンの下で2 pxと表示される.
しかし、IOS 8では0.5 pxがサポートされている.これは、devicePixelRatio=2の場合、以下のcssを使用することができることを意味する.

div{
     border:1px solid #000;
}    

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

しかしios 7以下ではandroidなど他のシステムでは0.5 pxが0 pxと表示されるので、古いバージョンのシステムと互換性を持つためにhackを書く必要があります.
2つのシナリオがあります.
1、JSはブラウザバージョンがIOS 8+かどうかを判断し、そうであればhairlinesのクラス名を付けてheadに加えればよい.
CSSコード:

div{
      border:1px solid #000
}

.hairlines div{
      border-width:0.5px
}

JSコード:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
      document.querySelector('body').classList.add('hairlines')
}

2、JSは0.5 pxの枠線がサポートされているかどうかを判断し、はい、hairlinesのクラス名を付けます.(コードはbody内に置く)

if (window.devicePixelRatio && devicePixelRatio >= 2) {
      var testElem = document.createElement('div');
      testElem.style.border = '.5px solid #000';
      document.body.appendChild(testElem);
 
      // div  
      if (testElem.offsetHeight == 1){
        document.querySelector('html').classList.add('hairlines');
      }
 
      //   hairlines   ，   div
      document.body.removeChild(testElem);
}

コードをbody内に置くと再描画があり、最初の方法がより良いです.
もちろんこれらの方法は、IOS 7を含むIOS 7以上の機器しか互換性がありませんが、他の機器と互換性がある場合はどうしますか?これは細かく話します...
retina画面の下で、このようなmetaを書いたら、1 px幅のものは永遠に書けません.
CSS画素と物理画素の定義について,網膜(Retina)へのWeb時代を詳しく紹介した.
viewportでは、initial-scale(初期時のスケーリングを表す)が設定ため、minimum-scale(最小スケーリングスケール)とmaximum-scale(最大スケーリングスケール)はいずれも1であるため、ページ全体をスケーリングすることができず、retina画面下の1つのcss画素は2つ(複数)の物理画素に対応するため、1 px(物理)幅のものは永遠に書けない.しかし、私たちは実際にこのように書くことができます.

宝を洗うM端はこのような方案で、このように1つのcssの画素は完璧に1つの物理の画素に対応することができて、私达は1 pxのものを書くことができます.
その他のシナリオ:
1. transform: scale(0.5)
方法1:CSSコード:

div {
   height:1px;
   -webkit-transform: scaleY(0.5);
   -webkit-transform-origin:0 0;
   overflow: hidden;
   background: #000;
}

HTMLコード

   1px   
   

缺点:
圆角无法实现，实现4条边框比较麻烦，并且只能单独实现，如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。

比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。

div{
   position: relative;
}
 
div:after{
   content:"";
   position: absolute;
   bottom:0px;
   left:0px;
   right:0px;
   border-bottom:1px solid #000;
   -webkit-transform:scaleY(.5);
   -webkit-transform-origin:0 0;
}

2. box-shadow
実装方法:
CSSによるシャドウ処理により0.5 pxの効果を実現した.

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

メリット:
基本的にすべてのシーンが満たされ、フィレットのbutton、単一、複数の線が含まれています.
欠点:
色が扱いにくく、黒rgba(0,0,0,1)が最も濃い場合です.影が出て、使いにくいです.box-shadowを大量に使用すると、パフォーマンスのボトルネックになる可能性があります.4つの枠線の実現効果は理想的ではありません.
3.background-imageの使用
background-imageを使用して1 pxを実装するには、グラデーションlinear-gradientまたは直接ピクチャ(base 64)を使用する2つの方法があります.
グラデーションlinear-gradient(50%は色、50%は透明)
たんせん

div {
    height: 1px;
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat
    background-size: 100% 1px;
}

複数の線:

div {
    background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;
}

メリット:
単一の枠線を設定できます.複数の枠線で色の欠点を設定できます.
グラデーションを大量に使用すると、パフォーマンスのボトルネックコード量の多くがバックグラウンドピクチャの互換性に問題がある可能性があります.
画像(base 64):

div {
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
    border-width: 0px 0px 1px;
}

メリット:
単一の枠線を設定できます.複数の枠線にパフォーマンスのボトルネックがないという問題と欠点があります.
色を修正するのは面倒で、画像を交換する必要があります2枚の画像の多背景の画像を使う必要があります互換性の問題があります