我试图设计尽可能响应网站(除非为iPhone设置了特殊的样式表).为此,我将所有字体大小设置为“em”.我们的网站刚刚开始测试开发,我的一位同事给我发了一张他家用电脑的截图,他的Firefox的基本字体大小已经设置为24pt. ([见这里的截图.])这样一个明显更大的基本字体大小(imho)不是我在设计中考虑的东西.我知道覆盖用户默认值是不好的做法,但这主要是基于图形的体验(特别是在首页上),并且文本需要保持在指定的框中 – 如您所见,较大的字体大小打破了设计.
以下是我认为是css的重要摘录：
body {
background: white;
font-family: Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 1em;
color: #858585;
}
.item.news.priority h2 {
font-size: 1.25em;
}
.item.news h2 {
font-size: 0.9em;
}
您可以访问www.loeuf.com直播.
你有什么建议？用像素值覆盖正文字体大小,还是仅仅破坏设计的h2元素？什么是最佳做法？
解决方法
虽然我对c_kick关于使用em的评论有所了解,但真正响应式设计的一部分是允许用户设置发挥作用.这意味着让浏览器默认保留为默认值.毕竟,您不知道查看您网站的人是否几乎失明,因此需要大文本.因此,在身体上设置默认px将使那种“响应性”无效,我认为这部分是你的意图.
现在,如果您不关心这一点,c_kick在主体上设置px基础的解决方案是有效的(也是最简单的).
如果你希望保持用户的响应能力,但让它以图形方式运行良好,那么你需要做两件事之一(我不确定第二件事可以很容易地工作,这只是一个想法被扔掉了与#1形成鲜明对比,我确信它可以起作用)：
>设置并允许图像与字体大小成比例(因此基于em的图像缩放,或者文本大小驱动图像随后缩放的容器高度),或者……>将这些图像(但不是文本框)周围的边距或填充设置为大小调整,以使图像周围的“间隙”与文本缩放的比例成比例.
