13

虽然我对响应式设计的想法并不陌生，但我经历了一件非常麻烦的事情......

我决定完全搬到rem单位，但我仍然遵守62.5%规则（我已经使用它了em）。

所以对于初学者来说：

html {
   font-size: 62.5%; 
}

我假设1rem = 10px（我知道这并不总是正确的，但是嘿，这对我来说是为了简化数学，对于浏览器来说它仍然是相对的吧？）

恐怖始于Opera（ linux 和 win 版本的12.12，默认字体大小分别设置为14px和16px）。

header nav ul li a span {
    padding: 1.8rem 2.7rem 3rem 0;

    font-family: 'sawasdeebold', sans-serif;
    font-size: 2rem;
    line-height: 3rem;

    letter-spacing: -0.3rem;
    display: block;
}

rem正如您所看到的，由于使用了单位，我的部分导航可以说是“像素完美” 。在linux下页面有点窄（没问题，字体更小，所以1rem代表的像素更少）。但是，nav如果将默认大小更改为其他内容，则所有内容都会严重缩放14px......在 Windows 下也是如此16px......整个缩放想法根本行不通。我不需要每个像素都匹配，但它看起来很丑......

对物导航

类似的问题出现在IE9下，但这次是 logotype 其中：

header h1 a {
    margin: 1.8rem 0 0 1.6rem;
    width: 46.2rem;
    height: 10.1rem;
    background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
    background-size: 46.2rem 20.2rem;
    text-indent: -5000px;
    display: block;    
}

header h1 a:hover {
    background-position: 0 -10.1rem;
}

即使我设置了标识的高度和背景的确切大小，在悬停时，背景位置1px太低......

除了这些问题，我还有一个普遍的问题。

是否可以使用单位创建“像素完美”布局rem？

我什至还没有触及媒体查询，我想知道这是否值得我努力......

非常感谢你们！

4

2 回答 2

4

所以...我已经切换回em单位。除了 IE9 中的少数（次要）故障（众所周知的亚像素问题）之外，所有浏览器中的一切都是完美的。而且，和之前的问题一样，我对哪个也使用单位rem没有问题。遗憾的是，这些单元似乎还不够稳定，无法在现有的网络浏览器中使用它们。结案...media queriesemrem

于 2013-01-27T16:20:24.247 回答
2

如果你想继续使用 1rem = 10px 你试过了吗 -</p> 

html {
    font-size: 10px; 
}

代替

html {
    font-size: 62.5%; 
}

这能解决问题吗？

于 2013-01-21T15:48:16.733 回答