移动端reset样式，了解多少？

最近在做移动端的项目，对于reset.css 样式，特来总结一波。

对于移动端的reset的样式的话，主要有以下几个注意的点：

1. box-sizing: border-box; 盒子模型的设置，主要目为了防止内容溢出
2. -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;
}
复制代码

转载于:https://juejin.im/post/5d04b52bf265da1bc64bc045