虽然我不是新颖的回应设计的想法我经历了一个非常麻烦的事情…
我决定完全移动到rem单位,但我仍然按照62.5%的规则(我已经用em了).
所以对于初学者来说:
html { font-size: 62.5%; }
我假设1rem = 10px(我知道这并不总是真的,但嘿,这对我来说有点缓解数字,浏览器还是相对的吗?)
恐怖从Opera开始(12.12两个linux和win版本,其中默认font-size分别设置为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表示较少的像素).但是,如果默认大小更改为14px以外的其他尺寸,则nav中的所有内容都会严重不足…在Windows下,对于16px也是如此…整个缩放概念不起作用.我不需要每个像素匹配,但它看起来很丑陋…
类似的问题出现在IE9下,但这次是标识,其中:
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单位创建“像素完美”布局是否可能?
我还没有触及到媒体查询,我想知道是否值得我努力…
大大谢谢你们!