移动端CSS最佳实践

Question

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

- Kornel William

Answer 1

如果你真的需要重置样式，可以参考Carrer博客的重置方法：(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：这里有一个针对移动端的选项。

即使你不使用Boilerplate，你可能希望添加其中的一些功能到自己的项目中。

- lsl