reset.css引入以及1px邊框問(wèn)題的解決方法
我要評(píng)論一、關(guān)于reset.css
因?yàn)椴煌臑g覽器默認(rèn)的樣式不同，所以在著手項(xiàng)目開始前，我們需要引入reset.css，將所有html標(biāo)簽的默認(rèn)樣式統(tǒng)一化。我這里推薦一個(gè)下載reset.css的網(wǎng)站：https://cssreset.com/，里面還有一些normalize.css之類的，大家有興趣可以研究。
二、關(guān)于1px邊框問(wèn)題
因?yàn)樽詮膔etina屏以來(lái)，不同的手機(jī)又不同的像素密度，css中的1px并不等于移動(dòng)設(shè)備中的1px， 最直接的表現(xiàn)就是1px邊框問(wèn)題；簡(jiǎn)單說(shuō)就是你給border的css寫個(gè)1px，到手機(jī)上卻變粗了顯示成2px。
所以在項(xiàng)目中我們引入一個(gè)border.css解決這個(gè)問(wèn)題。
三、項(xiàng)目中引入
1、新建styles文件夾
把reset.css和border.css粘貼到此：
reset.css
2、main.js中引入
main.js
3、配置路徑
我覺(jué)得'./assets/styles/reset.css'這個(gè)路徑太長(zhǎng)了，所以我們?cè)趙ebapck.base.conf.js中的alias中配置下路徑
配置路徑
4、main.js中簡(jiǎn)化下路徑引入
main.js
上面步驟完成以后，因?yàn)樾薷牧藈ebpack里面的配置，所以我們需要npm run dev重啟一下服務(wù)，ok。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
解決移動(dòng)端1px邊框問(wèn)題的幾種方法(5種)
這篇文章主要介紹了解決移動(dòng)端1px邊框問(wèn)題的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-27
詳解移動(dòng)端Html5頁(yè)面中1px邊框的幾種解決方法
這篇文章主要介紹了詳解移動(dòng)端Html5頁(yè)面中1px邊框的幾種解決方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-24- 這篇文章主要介紹了解決移動(dòng)端1px邊框最好的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-23
