紀錄工作經驗、相關知識,解決技術相關問題。

CSS

CSS Reset / 樣式初始化 -使用 normalize.css

css

css

為什麼在不同瀏覽器中樣式會有差異?

網頁開發中,新手最常遇到的問題,其中之一就是瀏覽器樣式差異。每個瀏覽器彼此都有自己的 CSS 樣式,而新手開發中,往往也不會針對 HTML 最基礎的樣式進行個別調整,這就往往造成了開發完成後,換個瀏覽器預覽,卻發現出現跑版、破版…等狀況。

為了解決這個問題,你可以自己針對 CSS 樣式進行調整,但這邊推薦一款工具 normalize.css ,這款 css 能有效解決瀏覽器彼此間樣式上的微小差異問題。

解決方法

遇到這種問題,常見的解決方法有 :

針對跑版、有差異的地方個別解決

如果你的網頁數量或架構已經開發到非常龐大,深怕會影響到其他區塊時,最保險的辦法,建議還是針對錯誤的地方修正。

使用 normalize.css 減小差異

如果你正在開發階段,或是網頁頁面較少,樣式較為統一,建議可以使用 normalize.css,來減小瀏覽器帶來的樣式差異問題。

如果你的網站已經正式對外,還是可以使用 normalize.css,不過會建議用在新增加的頁面上,這樣可以使網站影響範圍變小,也有助於加快後續開發。

normalize.css 官方說明,有許多框架、平台已經使用( 有興趣可以到官方底下看 ),其中大家常用的 Bootstrap 也是使用它,所以如果妳是採用 Bootstrap,那這包是可以忽略的。

安裝方式

安裝使用方式也很簡單,這邊同樣使用NPM進行安裝,如下 :

npm install normalize.css

安裝之後,就可以依據需求,將該工具用引入於 CSS 最上方,就可以有效解決瀏覽器之間樣式差異問題。

1 留言

  1. i like this fabulous post

發表迴響