reset.css引入以及1px邊框問題的解決方法
發(fā)布時間：2018-07-10 15:57:26 作者：Ewall_ 
我要評論
我要評論這篇文章主要給大家介紹了關于reset.css引入以及1px邊框問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、關于reset.css
因為不同的瀏覽器默認的樣式不同，所以在著手項目開始前，我們需要引入reset.css，將所有html標簽的默認樣式統(tǒng)一化。我這里推薦一個下載reset.css的網站：https://cssreset.com/，里面還有一些normalize.css之類的，大家有興趣可以研究。
二、關于1px邊框問題
因為自從retina屏以來，不同的手機又不同的像素密度，css中的1px并不等于移動設備中的1px， 最直接的表現(xiàn)就是1px邊框問題；簡單說就是你給border的css寫個1px，到手機上卻變粗了顯示成2px。
所以在項目中我們引入一個border.css解決這個問題。
三、項目中引入
1、新建styles文件夾
把reset.css和border.css粘貼到此：
reset.css
2、main.js中引入
main.js
3、配置路徑
我覺得'./assets/styles/reset.css'這個路徑太長了，所以我們在webapck.base.conf.js中的alias中配置下路徑
配置路徑
4、main.js中簡化下路徑引入
main.js
上面步驟完成以后，因為修改了webpack里面的配置，所以我們需要npm run dev重啟一下服務，ok。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
- 這篇文章主要介紹了解決移動端1px邊框問題的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-02-27
這篇文章主要介紹了詳解移動端Html5頁面中1px邊框的幾種解決方法的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-24- 這篇文章主要介紹了解決移動端1px邊框最好的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-23
