一、為什麼會有一畫素問題
弄明白這個問題，首先要知道dpr了。
dpr（device pixel ratio）pixel等於picture element。裝置畫素比，是預設縮放100%的情況下，即dpr=裝置畫素個數/理想視口畫素個數(device-width)。
1.裝置畫素：裝置的物理畫素，任何裝置的物理畫素都是固定不變的。
2.布局視口：移動端css布局所依據的視口，即css布局是根據布局視口來計算的。理想視口即為理想的布局視口。
拿iphone6為例，當我們寫一畫素線border-top：1px solid red;時，螢幕顯示的1px的紅線嗎？顯然不是。布局視口是移動端我們css布局的依據視口，在我們設定時就將布局視口設定為理想視口了。iphone6的dpr=2，因此在螢幕上顯示的其實是2px的紅線。有人說，那我們寫css布局時寫border-top:0.5 solid red;不就完了嗎。想法很好，但是計算機會將0.5計算成1。
二、transform:scale
這裡的解決辦法是對這條線進行縮放，使用偽元素::before或者::after來實現一畫素邊框，再利用@media適配不同的裝置畫素比，來確定縮放比例。
.border-top .border-top::before
/*2倍屏
*/@media (-webkit-min-device-pixel-ratio: 2.0),(min-device-pixel-ratio: 2.0)}
/*3倍屏
*/@media (-webkit-min-device-pixel-ratio: 3.0),(min-device-pixel-ratio: 3.0) }
更多專業前端知識，請上
【猿2048】www.mk2048.com
css一畫素問題
在生活中有很多美好的事情,但也有一些不如人意的事,同樣在我們前端也一樣.就舉乙個簡單的列子 如果你在設定css樣式的時候你想設定乙個底邊框為1px的線條就會寫 border bottom solid 1px 000 你看到的結果真的是1px嗎?錯了,這個時候計算機會很大方的給你2px,解決方法如下 ...
Vue React解決移動端一畫素問題的封裝
因為不同的裝置，不同的裝置畫素比 dpr 導致的。當我們在樣式中設定邊框寬度為 1px 時 這裡使用的是css畫素 裝置畫素比為2的裝置，會用4個物理畫素 dp 來渲染這個邊框 而裝置畫素比為1的裝置，會用1個物理畫素來渲染這個邊框，導致最終的視覺效果有差異。stylus封裝 border 1px ...
移動端一畫素問題解決方案
在移動端解析度是不相同的,目前來說可以分一倍屏,二倍屏,三倍屏,在不同解析度上顯示的1畫素可能會被渲染為2個畫素點或者三個畫素點,這樣嚴重影響了美觀,所以我們要解決一畫素問題 html border div div css after裡面的width 200 height 200 就是把after元...