在移動互聯網的時代,開發者必須考慮到移動端的適配問題,而CSS初始化則是移動端適配必不可少的一環。
/* CSS初始化 */ * { margin:0; padding:0; box-sizing:border-box; } body { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-touch-callout:none; position:relative; font-family:Arial, sans-serif; font-size:14px; line-height:1.5; color:#333; } input[type="text"], input[type="tel"], input[type="email"], textarea { border:none; outline:none; -webkit-appearance:none; } a { text-decoration:none; color:#333; } ul,ol { list-style:none; } img { border:none; vertical-align:middle; } button { border:none; outline:none; background:none; cursor:pointer; } .container { width:100%; max-width:640px; margin:0 auto; }
在CSS初始化中,我們為所有元素指定了默認樣式,包括設置margin、padding、box-sizing為0,使得元素的默認樣式不會影響布局;去掉輸入框的border和outline樣式,使得輸入框更加美觀;去掉a標簽的下劃線,統一字體顏色;去掉ul、ol列表的默認樣式,使得列表樣式更加統一;設置img的border為none,使得圖片沒有邊框;去掉按鈕的border和outline,使得按鈕更加美觀。
另外,我們為容器類元素.container設置了寬度為100%,最大寬度為640px,實現了響應式布局。
這樣的CSS初始化能夠讓我們快速達到一個美觀、一致的移動端頁面效果,有助于提高開發效率。