移动CSS最佳实践

Question

我应该在移动web中重写/重置哪些样式?当您从一开始就将margin: 0; padding: 0;设置为任何元素时，是否有类似于桌面web的模式?如果我重置了太多的样式/元素会有什么后果吗?

Answer 1

如果你真的想要重置:Carrer blog有一个: (github)

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0; 
 border: 0;
}
body 
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6{ font-weight: normal; }
p img { float: left; margin: 0 10px 5px 0; padding: 0; }
img { border: 0; max-width: 100%; }
table { width:auto; border-collapse: collapse;border-spacing: 0; }

必须阅读关于此事的SO帖子。从Harpo:

你有多相信CSS重置桌面?

我倾向于同意那些认为CSS重置也是如此的人笨拙的(你读过吗?)有些我从来没听说过元素)，并最终根据您的实际情况手工制作规则需求将是最可预测和最有效的。

移动平台只会让带宽更加珍贵。我猜所以你才会问。我会说，把标准重置减到你真正需要的。

如果你是Boilerplate:有一个移动选项

即使您不使用样板文件，您也可能希望将它的一些特性添加到您自己的文件中。