html**
偽元素after的高度為10px時chrome效果圖
偽元素after的高度為10px時firefox效果圖
偽元素after的高度為1px時chrome效果圖
偽元素after的高度為1px時firefox的效果圖
1、偽元素的高度大於1px時scale可以正常渲染，當高度為1時，scale小於1時火狐瀏覽器不能很好的渲染出來。
2、實際上，當偽元素的高度為1px時，scale在谷歌瀏覽器雖然能正確顯示出來，但是渲染的過程中只是改變了顏色的透明度，並沒有改變高度的大小。
如下圖所示：渲染前
渲染後
而此時，火狐瀏覽器壓根是不渲染的（因為為元素的高度小於1且scale也小於1），所以scale的方式解決小於1px時會存在相容問題
此時，最好的解決辦法是
當設計稿的畫素小於1px時，**渲染直接是1px，然後給border-color或者background-color的色值設定為rgba形式
如下圖，相容谷歌和火狐
谷歌
火狐
移動端1px實現
新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤，新增定位和偽類。border 1px color position relative after d...
移動端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...