HTML 和 CSS em/pixels
HTML and CSS em/pixels
我一直认为 em 是一种比使用 px 更具响应性的设计,但我找不到关于边框和填充等内容的任何转换。
我知道在字体大小中你会用你想要的像素大小除以默认字体大小(在大多数情况下是 16px)但是对于不一定有默认值的边框和填充呢?
干杯
您只是还在使用字体大小。示例:
body {
font-size: 10px;
}
div {
border-width: 2em;
}
在这种情况下,div
的 border-width
为 20px
。一个元素的font-size
也会影响其他维度然后:
div {
font-size: 12px;
border-width: 2em;
}
现在 div
的 border-width
为 24px
,尽管 body
的字体大小不同。
您可以使用媒体查询进行响应式设计
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
font-size:1em;
border-width: 2em;
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 760px) {
/* STYLES GO HERE */
font-size:1.2em;
border-width: 3em;
}
Em 相对于其父级继承和缩放。这是一篇详细解释它的文章:https://j.eremy.net/confused-about-rem-and-em/
这是一个非常相似的问题,可能会更清楚地说明 em 计算:How is an em calculated?
我一直认为 em 是一种比使用 px 更具响应性的设计,但我找不到关于边框和填充等内容的任何转换。
我知道在字体大小中你会用你想要的像素大小除以默认字体大小(在大多数情况下是 16px)但是对于不一定有默认值的边框和填充呢?
干杯
您只是还在使用字体大小。示例:
body {
font-size: 10px;
}
div {
border-width: 2em;
}
在这种情况下,div
的 border-width
为 20px
。一个元素的font-size
也会影响其他维度然后:
div {
font-size: 12px;
border-width: 2em;
}
现在 div
的 border-width
为 24px
,尽管 body
的字体大小不同。
您可以使用媒体查询进行响应式设计
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
font-size:1em;
border-width: 2em;
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 760px) {
/* STYLES GO HERE */
font-size:1.2em;
border-width: 3em;
}
Em 相对于其父级继承和缩放。这是一篇详细解释它的文章:https://j.eremy.net/confused-about-rem-and-em/
这是一个非常相似的问题,可能会更清楚地说明 em 计算:How is an em calculated?