手機端：1畫素邊框解決方案
/**
* @include border(0 0 0 1px, solid, red, 4px);
* @module 背景與邊框
* @description 為元素新增邊框（包括1px邊框）
* @method border
* @version 2.0.0
* @param $border-width 指定邊框厚度（單位為px），預設值：1px，取值與`border-width`屬性一致，不同方向代表邊框位置 <2.0.0>
* @param $border-color 指定邊框顏色 <2.0.0>
* @param $border-style 指定邊框樣式 <2.0.0>
* @param $radius 指定邊框圓角半徑，預設值：null <2.0.0>
*/@mixin border($border-width: 1px, $border-style: solid, $border-color: #e3e3e3, $radius: null)
border-radius: $radius;
&::after
}@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5***x) and (max-resolution: 2.49***x)
}@media (min--moz-device-pixel-ratio: 2.5),
(-webkit-min-device-pixel-ratio: 2.5),
(min-device-pixel-ratio: 2.5),
(min-resolution: 240dpi),
(min-resolution: 2.5***x)
}transform-origin: 0 0;
}}
移動端1畫素邊框
通常我們會有偽類和定位來解決1畫素的問題，但是使用偽類也是有問題的，但是你可以換一種方式實現1畫素邊框的問題，box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...
手機實現1畫素邊框顯示
問題需求 頁面設定邊框1畫素時，電腦端顯示是正常的，手機端會顯示比正常粗一點。1 給需要顯示1畫素邊框的元素新增偽類元素，設定邊框為1px。注意 這個時候和直接在元素本身設定邊框是一樣的效果，達不到真正顯示1畫素的問題。2 然後用media 查詢，設定偽類元素的縮放比例。media only scr...
解決CSS移動端1px邊框問題
移動專案開發中，安卓或者ios等高解析度螢幕會把1px的border渲染成2px來顯示，網上搜了一下，解決方法如下 這個主要利用after偽類進行縮放。呼叫公共class，還是很方便的。if window.devicepixelratio devicepixelratio 2 document.bo...