** 假設有個hello.vue頁面，我用的是stylus編寫css： **
......
假如這是個框
......
......
在pc端瀏覽這 1px 是真的 1px，但是在手機端瀏覽的話它就不是 1px，因為手機端有個dpr的概念，iphone6 等高解析度螢幕的物理畫素是css畫素的兩倍，所以手機上看到是 2px 的線。
想實現移動端的 1px，在這主要是利用乙個偽元素加它的縮放。
為了讓 1px 線條在專案中能夠復用，把樣式封裝在乙個函式並放在乙個stylus檔案裡。
在stylus資料夾下新建 mixin.styl，用於存放通用的混合書寫（像函式），定義好乙個名叫 border-1px 的函式，設定乙個顏色引數 $color，寫好偽元素 :after 和樣式 ，即設定一條線，相對于父元素是絕對定位 。
** mixin.styl： **
border-1px($color)position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
hello.vue 頁面引入 mixin.styl，在要畫邊框的元素後面使用 border-1px(rgba(7, 17, 27, 0.1))
** hello.vue css部分： **
手機端的1px邊框如何實現
1 把邊框設定為absolute,使用after,定義寬度為1px mixin.styl 2 通過 media,判斷不同的dpi,來改變相應的y軸寬度 base.styl 定義公共class border 1px，在用到1px邊框的地方，加上border 1px 又叫物理畫素 是顯示屏能夠控制的最小...
移動端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值...