移動端で0.5ピクセルを描く方法(整理)

1、擬似要素+css 3のスケーリングが巧みに実現される。

基本的な手順は次のとおりです.
ターゲットエレメントの位置決め参照を設定ターゲットエレメントに擬似エレメントbeforeまたはafterを追加し、擬似エレメントに1 pxを追加する絶対位置決めを設定します.擬似エレメントの幅をターゲットエレメントの2倍に0.5倍縮小します(ターゲットエレメントのサイズに戻ります)border-boxを使用してborderをパッケージします.
コードは次のとおりです.

.item4, .item5 {
    width: 200px;
    height: 100px;
    position: relative;
}

.item4 {
    border: 1px solid #000;
}

.item5::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

4、transform:scale()方式を採用する

描画した線の高さを半倍に拡大・縮小するコードです.

 
   
 1
 
   
 2
 
 

p{ 
  margin: 50px auto; 
  padding: 5px 10px 5px 10px; 
  color: red; 
  text-align: center; 
  width: 60px; 
} 
p:first-child{ 
  border-bottom: 1px solid red; 
} 
p:last-child{ 
  position: relative; 
} 
p:last-child:after { 
  position: absolute; 
  content: ''; 
  width: 100%; 
  left: 0; 
  bottom: 0; 
  height: 1px; 
  background-color: red; 
  -webkit-transform: scale(1,0.5); 
  transform: scale(1,0.5); 
  -webkit-transform-origin: center bottom; 
  transform-origin: center bottom 
} 

3、border-image方式を採用する

これは実は簡単なので、0.5ピクセルの線とその組み合わせで使用する背景色の画像を直接作成すればいいです.
コードは次のとおりです.

 
   
 1
 
   
 2
 
 

p{ 
  margin: 50px auto; 
  padding: 5px 10px 5px 10px; 
  color: red; 
  text-align: center; 
  width: 60px; 
} 
             
p:first-child{ 
   border-bottom: 1px solid red; 
} 
p:last-child{ 
   border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round; 
} 

4、background-image方式を採用する

ここではグラデーションlinear-gradient方式を採用しており、コードは以下の通りです.

 
   
 1
 
   
 2
 
 

p{ 
  margin: 50px auto; 
  padding: 5px 10px 5px 10px; 
  color: red; 
  text-align: center; 
  width: 60px; 
} 
 
p:first-child{ 
  border-bottom: 1px solid red; 
} 
p:last-child{ 
  background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%); 
  background-image: linear-gradient(bottom,red 50%,transparent 50%); 
  background-size:  100% 1px; 
  background-repeat: no-repeat; 
  background-position: bottom right; 
} 

5、js動的設定viewportの方案

一部の大手工場(いわゆる淘宝)の解決策は、jsを使用して画面のデバイス画素比を動的に取得し、viewportを動的に設定することです.もちろん、現在の最善の解決策だと思います.

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

一般的に私たちが取得したビジュアル原稿の大部分はiphone 6なので、私たちが見ているサイズは一般的に2倍の大きさで、remを使用する前に、私たちは一般的に自覚的に/2を表示しますが、実はこれも無理ですが、remに合わせて使用すると、完全にビジュアル原稿のサイズに合わせて設定することができます.
原稿の2倍に設計されたのは、iphone 6のような画面が高画面に属しているため、すなわちデバイス画素比(devicepixel ratio)dprが大きいため、表示される画素がはっきりしているからである.一般的な携帯電話のdprは1で、iphone 4、iphone 5という高画面は2で、iphone 6 s plusという高画面は3で、jsのwindowを通過することができます.デバイスPixelRatioは現在のデバイスのdprを取得するので、iphone 6が与えるビジュアル原稿のサイズは(*2)750です.×1334です.dprを手に入れると、viewport metaヘッダでブラウザにページを自動的にスケールさせるのをキャンセルし、自分でviewportのcontentを設定することができます.例えば(ここでviewportを設定するのはborder 1 pxの効果を実現するためで、scaleの影響でハイビジョン画面に0.5 pxの効果が表示されます)
参照リンク:http://developer.51cto.com/art/201510/493591.htm https://blog.csdn.net/yisuowushinian/article/details/52744508