一.關(guān)于stylus裝不上的問題
報(bào)錯(cuò)：npm WARN stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
這是我在做Vue的一個(gè)demo時(shí)遇到的問題，在pckage.json中添加“stylus-loader”:"^2.1.1" npm install之后在控制臺(tái)運(yùn)行npm run dev報(bào)錯(cuò)艰赞，發(fā)現(xiàn)是因?yàn)樯倭艘蕾?br>
查了一下解決辦法有兩個(gè)：
1.eslint-config-standard@6.2.1的提示解決方案
找到項(xiàng)目中的package.json文件,對(duì)應(yīng)修改位置:
第一步:把eslint-config-standard 改成"^6.2.1" 比如: "eslint-config-standard": "^6.2.1",
第二步:把eslint-plugin-promise 改成 "^3.4.0" 比如: "eslint-plugin-promise": "^3.4.0",
如果再次安裝的時(shí)候 提示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í)行安裝命令 即可解決
二.瀏覽器自動(dòng)出現(xiàn)兼容性寫法
這是因?yàn)閚ode-mdules文件夾里有一個(gè)postcss的文件夾
vue-loader依賴了這個(gè)插件专缠，這個(gè)插件可以抹平一些兼容性寫法孤荣。
三.關(guān)于1像素border的實(shí)現(xiàn)
辦法：用偽元素 + 縮放巧妙地實(shí)現(xiàn)
給父元素增加一個(gè)偽類after浸船，把a(bǔ)fter設(shè)置成一條線玫锋，在dpr為2或者3的手機(jī)的手機(jī)上通過meta進(jìn)行縮放
1.定義一個(gè)mixin滓走，這是css預(yù)處理器提供的一個(gè)方法，如定義一個(gè)函數(shù),這個(gè)函數(shù)定義的是css的代碼嗓化，這樣寫比較通用锅劝，可以在任意需要這段代碼的地方調(diào)用這個(gè)函數(shù)，但是這里的寫法跟直接寫border-bottom:1px solid black是一樣的蟆湖，并沒有實(shí)現(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.給我們剛剛設(shè)置的偽類實(shí)現(xiàn)縮放故爵，使它真正的實(shí)現(xiàn)1像素邊框
- 給父元素添加一個(gè)特殊樣式，class=“border-1px”隅津，這個(gè)class要全局定義诬垂，因?yàn)橐嗵幨褂冒 ?/li>
@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像素的實(shí)現(xiàn):</b>主要是利用了<b>偽類</b>和<b>縮放</b>的功能。
1.在需要畫邊框的元素(就叫父元素啦)上定義一個(gè)偽類伦仍，偽類是相對(duì)于父元素是absolute定位(元素當(dāng)然得是relative啦结窘，只要不是static就行哈)，通過偽類畫出一個(gè)1像素的邊框充蓝，定位到父元素的下面隧枫，當(dāng)然就會(huì)呈現(xiàn)出父元素的下邊框啦
2.應(yīng)用一個(gè)class把偽類做縮放，根據(jù)設(shè)備的最小dpr指定縮放的比例谓苟，如dpr是2就縮放0.5倍官脓，如dpr是1.5就縮放0.7倍
