如果你在移動端開發過 web 應用,一定會遇到清除/重置 CSS 樣式的問題。因為各種設備、瀏覽器默認的樣式差異很大,容易造成樣式的不協調、錯位等問題。那么,如何在移動端清除 CSS 樣式呢?
* { margin: 0; padding: 0; box-sizing: border-box; } body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch; position: relative; max-width: 100%; margin: 0 auto; font-size: 14px; /*根據需要修改*/ color: #333; /*根據需要修改*/ line-height: 1.5; background-color: #fff; /*根據需要修改*/ } ul, ol, li { list-style: none; } img { display: block; max-width: 100%; height: auto; } a { color: #333; /*根據需要修改*/ text-decoration: none; } button, input { outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
以上是一個常用移動端 CSS 樣式的清除代碼,在項目中引入即可。該代碼清除了除表格等部分外,頁面上的所有默認樣式。你可以根據需要進行修改或添加,例如修改 body 樣式中 font-size 為 16px。