在做移動端開發時，設計師提供的視覺稿一般是750px，當你定義 border-width:1px 時，在iphone6手機上卻發現：邊框變粗了。。
這是因為，1px是相對於750px的（物理畫素），而我們定義的1px是相對於375px的（css畫素）「實際上應該是border-width:0.5px」。
解決方法：
1、border-image 實現
在使用border-image時，將border設計為物理1px，如下：
.border-image-1px也可以直接使用 base64 ：
.border-image-1px2、使用background-image實現
background-image 跟 border-image 的方法一樣，根據我們定義的將邊框模擬在背景上。
.background-image-1px3、多背景漸變實現
將上述方法中的替換為 css3 漸變。設定1px的漸變背景，50%有顏色，50%透明。
.background-gradient-1px4、使用box-shadow模擬邊框/* 或者 */
.background-gradient-1px
利用css 對陰影處理的方式實現0.5px的效果：
.box-shadow-1px5、viewport+rem實現
該方法是使用viewport+rem+js來實現的，可以直接設定1px就行了，而且圓角什麼的都沒問題。
下面的底邊寬度是虛擬1畫素的6、偽類 + transform 實現上面的邊框寬度是虛擬1畫素的
我們可以通過縮放來實現上面的效果：
@mixin bd-all-1px($bstyle, $color, $radius)這種方法還可以實現圓角，transform: scale(0.5);中的0.5是這樣計算來的，一般設計師提供的都是二倍圖，以iphone6為例，其螢幕寬度 375，設計稿是750 ，375/750=0.5；如果是三倍圖，就應該是scale(0.333333)了。}
移動端1px問題
在移動端頁面中設定邊框為1px時，在有的裝置中可能會發現邊框比1px要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...
移動端1px問題
在高清屏下，移動端的1px 會很粗。那麼為什麼會產生這個問題呢？主要是跟乙個東西有關，dpr devicepixelratio 裝置畫素比，它是預設縮放為100 的情況下，裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...
移動端1px實現
新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤，新增定位和偽類。border 1px color position relative after d...