在進行移動端項目時，元素節點的大小和樣式通常是根據設計圖紙來設置的，但有時根據設計圖紙編寫的樣式並不令人滿意。雖然表面上看起來和設計圖一樣，但感覺不像設計圖，還是有一種假的味道。在用戶界面審查過程中，通常會覺得分隔線或邊界線太粗，需要變細。然而，當看代碼時，它已經是1px了，爲什麼它還是那麼厚呢？
要理解問題的原因，我們必須首先理解幾個概念：
(1)物理像素
物理像素是顯示器(手機屏幕)上最小的物理顯示單元(像素粒子)。在操作系統的調度下，每個設備像素都有自己的顏色值和亮度值。例如，iPhone6上有750*1334個物理像素粒子。
(2)密度無關像素
設備無關像素(也稱爲密度無關像素)可以被認爲是計算機座標系中的一個點，它代表程序可以使用的虛擬像素(例如css像素)，有時我們也稱它爲邏輯像素。然後由相關係統轉換成物理像素。因此，在物理像素和設備獨立像素之間存在一定的對應關係，這是接下來要提到的設備像素比率。
(3)器件像素比(dpr)
器件像素比(dpr)定義了物理像素和器件獨立像素之間的對應關係。其值可根據以下公式獲得：
器件像素比(dpr)=物理像素/邏輯像素(px) //在某個方向，x方向或y方向，dpr=2
知道了設備的像素比率，我們可能就知道1px線變粗的原因了。簡而言之，手機的屏幕分辨率越來越高。相同尺寸的手機有更多的實際物理像素。因爲不同的移動設備每英寸有不同的像素，所以我們寫的1px等於這個移動設備在不同移動設備上的1px。目前，在開發移動終端時，通常會添加一句話：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了此頁面上視口的寬度是設備寬度，初始縮放值和最大縮放值都是1，並且禁止用戶縮放。
視口的設置與屏幕的物理分辨率成比例，而不是相同。移動窗口對象具有devicePixelRatio屬性，該屬性指示設備的物理像素與css像素的比率。在iphone的視網膜屏幕上，這個值是2或3，在CSS中寫入的1px長度映射到物理像素上的2px或3px。通過設置視口，您可以更改css中用於渲染的物理像素1px的數量。設置不同的視口。當然，1px線看起來厚度不同。
1px線變粗解決方案
1. 僞類和scale
這種方法的原理是去掉原始元素的邊框，然後用：before或：after來重做邊框。原先的元素相對定位，新做的 border 絕對，定位使用 transform 的 scale 把線條高度縮小一半，新邊框就相當於0.5px了。代碼如下：
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
2.使用flexible.js
如前所述，1px變得更厚的原因在於在面板上設置視口寬度。
如果視口寬度設置爲設備的實際物理寬度，css中的1px不等於實際的1px長度嗎？靈活的原則是這樣的。首先，獲得設備縮放比devicePixelRatio，然後根據縮放比動態設置視口值。因此，結果是無論哪個設備，1px總是代表一個設備像素，即設備的最小像素。
//devicePixelRatio=2時，mata狀態
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
//devicePixelRatio=3時，mata狀態
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
3. 使用meta viewport控制
原理同上
//1px像素線條
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
//0.5像素線條
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
4. 使用border-image
首先，你需要做一條0.5像素的線作爲線條的背景圖。
p{
border-width: 0 0 1px 0;
border-image: imageUrl 2 0 round;
}
5. 使用背景漸變linear-gradient
使用linear-gradient，背景圖像逐漸從彩色變爲透明。默認方向是從上到下。從0到50%的顏色是邊框顏色，然後下半部分是透明的。然後設置背景寬度爲100%，高度爲1px，然後刪除repeat，所以有顏色的就是0.5px的邊框。代碼：
.bg_border {
background-image: linear-gradient(0deg,black 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}