CSS:基本字体大小(在浏览器中设置)和响应式设计

Question

我试图设计尽可能响应网站(除非为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元素？什么是最佳做法？

Answer 1

虽然我同意c_kick对使用的评论,但em真正响应式设计的一部分是允许用户设置发挥作用.这意味着让浏览器默认保留为默认值.毕竟,您不知道查看您网站的人是否几乎失明并且因此需要大文本尺寸.因此,设置默认px的body是要作废该类型"反应,"我相信这是你意为部分什么的.

现在,如果您不关心这一点,c_kick px在此基础上设置基础的解决方案body是有效的(也是最简单的).

如果你希望保持用户的响应能力,但让它以图形方式运行良好,那么你需要做两件事之一(我不确定第二件事可以很容易地工作,这只是一个想法被扔出去与#1形成鲜明对比,我确信它可以起作用):

1. 设置并允许图像与字体大小成比例(因此em基于图像缩放,或者文本大小驱动图像随后缩放的容器高度),或者......
2. 将这些图像(margin或padding文本框)周围或周围设置为em大小调整,以使图像周围的"间隙"与文本缩放的比例成比例.

Answer 2

我发现font-size在pt中指定base 以及在em中指定所有其他大小非常有用.

因此,例如,指定以下设置:

html * {
    font-size: 12pt;
}

我肯定知道每个文字font-size: 1em都会占用

12pt = 12*(1/72英寸)= 12*0.35mm = 4.2mm宽

无论分辨率-无论是800×600,1024×768或1920×1200.

它显着简化了网站的设计,因为如果我指定width: 10em例如按钮我肯定知道这个按钮将具有12pt*10 = 4.2mm*10 = 4.2cm的尺寸.

此外,网站设计的15"与分辨率的显示器1920x1200的看起来几乎在相同的15"显示器,分辨率1024×768 -这是一个设计非常方便.

因此,目前我只关心实际(物理)显示尺寸和宽高比,这些尺寸和宽高比不会像分辨率那样变化,而且更容易预测.