CSS 3移動端初始化,是在移動端上開發網頁時,為了保證網頁展現效果的一致性,而對瀏覽器默認樣式進行重置或預設的一系列操作。
/* 引入 normalize.css 或 reset.css */ @import url('normalize.css'); /* 移動端初始化樣式 */ html { font-size: 62.5%; /* 1rem = 10px */ -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); /* 去除點擊高亮 */ height: 100%; } body { font-size: 1.6rem; line-height: 1.6; font-family: Arial, sans-serif; color: #333; margin: 0; padding: 0; height: 100%; -webkit-overflow-scrolling: touch; /* 開啟滾動動畫 */ } /* 媒體查詢 */ @media screen and (max-width: 800px) { /* 根據設備寬度調整字體大小 */ html { font-size: 50%; } /* 其他樣式調整 */ ... }
移動端初始化樣式除了對默認樣式進行重置外,還需要對一些常見的瀏覽器兼容問題進行處理。比如,通過設置-webkit-overflow-scrolling:touch來開啟滾動動畫,從而避免頁面滑動時出現卡頓等問題。
下一篇css @meida