1px問題-詳解

當你給一個div這樣的css樣式後 邊框寬度爲1px

.border
  height 50px
  width 50px
  margin 0 auto
  background pink
  margin-top 20px
  border 1px solid red

在手機發現 哎，怎麼有點粗

這就是經典的1px問題，下面貼出我的解決方案。網上栗子很多，可自行尋找

.scale_1px{
  position:relative;
  border:none;
}
.scale_1px:after{
  content:'';
  position:absolute;
  top: 0;
  left: 0;
  border: solid 1px red;
  box-sizing: border-box; 
  width: 200%; 
  height: 200%; 
  display: inline-block;
  transform: scale(0.5); 
  transform-origin: left top; 
}

發現可以勒（圖片不太明顯 自己嘗試下就可以看出來了）：

爲什麼？

物理像素

又稱設備像素，指設備能控制顯示的最小物理單位，只顯示器上的一個個點
從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了，和屏幕尺寸大小有關，單位 pt。

邏輯像素（dip）

css樣式代碼使用的就是邏輯像素，指的是viewport中的一個小方格。
如果在一個設備中，物理像素與邏輯像素相等，則邏輯=物理。但是，在iphone 4以上中，物理像素是640px960px，而邏輯像素數爲320480px。因此，需要使用大約4個物理像素來顯示一個CSS像素

像素比

物理像素/邏輯像素

例如：iPhone6的dpr爲2，物理像素750（x軸）,則它的邏輯像素爲375。

所以，1px的邊框在iphone6顯示只是1px的css像素 4個物理像素，爲實現真正1px需要縮小1倍，如果手機的dpr爲3 則縮小0.333 …