我正在制作流体响应式布局,其中布局在浏览器/屏幕上重新调整大小.
如果我使用body的font-size以百分比表示,那么将em用于所有事情是好的,
> font-size
>宽度
>保证金
>填充
>边框宽度
> border-radius
或者我应该只将em用于font-size？
我的目标是在事物向上和向下扩展时保持一致.
当我应该使用em和％时,我有点困惑.我体型的字体大小是62.5％
解决方法
在每个浏览器支持缩放之前,使用em被认为是可访问性的良好实践.现在我发现在特定场景(可能是你的)中轻松声明相对字体大小非常有用.
我发现相对大小调整不会在边界上产生美学上令人愉悦的结果,因为某些浏览器会尝试逐字地使用从em或百分比计算得到的浮点值,结果将是模糊的(尝试它).
我在大多数布局中都大量使用百分比.我发现一些基于通用百分比的样式可以满足多种布局需求(例如50/50分割,33 / 67,25 / 75等样式).
我个人觉得百分比更直观.宽度为100％的元素总是占用其父元素的100％(当然使用正确的大小调整大小),并且在代码中很容易阅读. 15em宽的元素可能占其父母的50％或150％;这并不是直接显而易见的,我发现很难跟踪(但也许这只是我).
以下是一些基线样式.这些尚未在每个可能的浏览器/设备上进行测试,但它们用于生产应用程序：
* {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 0;
margin: 0;
vertical-align: baseline;
}
BODY {
font: 11px/1.5 "Trebuchet MS",Arial,Verdana,sans-serif;
color: #404040;
background-color: #fff;
}
H1 {
font-size: 1.8em;
margin: .1em 0 .1em 0;
color: #2B265B;
}
H2 {
font-size: 1.6em;
margin: 0 0 .25em 0;
color: #303030;
}
H3 {
font-size: 1.4em;
margin: 0 0 .25em 0;
color: #3b5998;
}
H4 {
font-size: 1.2em;
margin: 0 0 .1em 0;
color: #666;
}
P {
margin: 0 0 1.5em 0;
font-size: 1.1em;
}
INPUT,SELECT,TEXTAREA {
border-style: solid;
vertical-align: middle;
margin: .2em 0 .2em 0;
border-radius: .3em;
-moz-border-radius: .3em;
}
INPUT[type="text"],INPUT[type="password"]{
border-color: #85a3bf;
width: 16em;
padding: .2em;
border-width: 1px;
}
INPUT[type="file"] {
border-color: #85a3bf;
width: 32em;
padding: .2em;
border-width: 1px;
}
INPUT[type="text"]:focus,INPUT[type="password"]:focus,TEXTAREA:focus {
border-color: #0066cc;
}
INPUT[type="submit"],INPUT[type="button"] {
border-color: #DDDDDD #BBBBBB #999999;
border-width: 1px;
background: #eee url([URL]) repeat-x;
padding: .2em .8em .2em .8em;
text-shadow: 1px 1px #fff;
}
INPUT[type="submit"]:hover,INPUT[type="button"]:hover {
background: #eee url([URL]) repeat-x;
}
INPUT[type="submit"]:active,INPUT[type="button"]:active {
background: #eee url([URL]) repeat-x;
}
INPUT[type="checkBox"],INPUT[type="radio"] {
margin: 0px .5em .1em .5em;
vertical-align: middle;
}
INPUT[type="image"] {
border: 0;
margin: 0;
}
SELECT {
padding: .1em;
border-width: 1px;
border-color: #DDDDDD #BBBBBB #999999;
background: #eee url([URL]) repeat-x;
}
TEXTAREA {
border-width: 1px;
border-color: #85a3bf;
padding: .3em;
Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
}