最近在做移动端的项目,对于reset.css
样式,特来总结一波。
对于移动端的reset
的样式的话,主要有以下几个注意的点:
box-sizing: border-box;
盒子模型的设置,主要目为了防止内容溢出-webkit-tap-highlight-color: transparent;
清除移动端浏览器的高亮效果
*,
::before,
::after {
margin: 0;
padding: 0;
/* 针对移动端 */
box-sizing: border-box;
/* 主流浏览器兼容处理,移动端的浏览器通常的话,都是基于webkit效果的 */
-webkit-box-sizing: border-box;
/* 清除移动端浏览器的高亮效果 */
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Microsoft Yahei', sans-serif;
font-size: 14px;
color: #333;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input,
textarea {
outline: none;
border: none;
/* 禁止textarea的右下角的放大效果 */
resize: none;
/* 清除移动端输入框特有的样式 */
-webkit-appearance: none;
}
复制代码