一.關(guān)于stylus裝不上的問題
報錯：npm WARN stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
這是我在做Vue的一個demo時遇到的問題，在pckage.json中添加“stylus-loader”:"^2.1.1" npm install之后在控制臺運行npm run dev報錯，發(fā)現(xiàn)是因為少了依賴
查了一下解決辦法有兩個：
1.eslint-config-standard@6.2.1的提示解決方案
找到項目中的package.json文件,對應修改位置:
第一步:把eslint-config-standard 改成"^6.2.1" 比如: "eslint-config-standard": "^6.2.1",
第二步:把eslint-plugin-promise 改成 "^3.4.0" 比如: "eslint-plugin-promise": "^3.4.0",
如果再次安裝的時候 提示update失敗,可以先從插件中刪除 eslint-plugin-promise的文件夾 然后在執(zhí)行安裝命令
2.stylus-loader@2.4.0的提示解決方案
第一步:把stylus-loader 改成 "^2.4.0" 比如: "stylus-loader": "^2.4.0", 如果沒有這條記錄就自行添加一條
第二步:需要多添加一條插件 "stylus": "0.52.4" 在package.json里面增加就好 然后執(zhí)行安裝命令 即可解決
二.瀏覽器自動出現(xiàn)兼容性寫法
這是因為node-mdules文件夾里有一個postcss的文件夾
vue-loader依賴了這個插件，這個插件可以抹平一些兼容性寫法。
三.關(guān)于1像素border的實現(xiàn)
辦法：用偽元素 + 縮放巧妙地實現(xiàn)
給父元素增加一個偽類after，把after設置成一條線，在dpr為2或者3的手機的手機上通過meta進行縮放
1.定義一個mixin，這是css預處理器提供的一個方法，如定義一個函數(shù),這個函數(shù)定義的是css的代碼，這樣寫比較通用，可以在任意需要這段代碼的地方調(diào)用這個函數(shù)，但是這里的寫法跟直接寫border-bottom:1px solid black是一樣的，并沒有實現(xiàn)縮放
border-1px($color)
position:relative
&:after
display:block
position:absolute
left:0
bottom:0
width:100%
border-top:1px solid $color
content:' '
&:before
display:block
position:absolute
left:0
top:0
width:100%
border-top:1px solid $color
content:' '
2.給我們剛剛設置的偽類實現(xiàn)縮放，使它真正的實現(xiàn)1像素邊框
- 給父元素添加一個特殊樣式，class=“border-1px”，這個class要全局定義，因為要多處使用啊。
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform:scaleY(0.7)
transform:scaleY(0.7)
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5)
<b >總結(jié)一下1像素的實現(xiàn):</b>主要是利用了<b>偽類</b>和<b>縮放</b>的功能。
1.在需要畫邊框的元素(就叫父元素啦)上定義一個偽類，偽類是相對于父元素是absolute定位(元素當然得是relative啦，只要不是static就行哈)，通過偽類畫出一個1像素的邊框，定位到父元素的下面，當然就會呈現(xiàn)出父元素的下邊框啦
2.應用一個class把偽類做縮放，根據(jù)設備的最小dpr指定縮放的比例，如dpr是2就縮放0.5倍，如dpr是1.5就縮放0.7倍
