html - 响应式设计单元

Question

我正在使用 Foundation 3.0 UI 框架创建大型 Web 应用程序，它具有基于 px 的布局和字体大小。

在设计中有基于“em”的字体大小/行高和填充/边距。我想知道为智能手机的响应式布局选择基于“em”的字体大小和填充是否是一个好的选择？

Answer 1

我认为 em 在响应式设计方面的主要优势在于您可以轻松更改不同屏幕尺寸的字体大小。

例如如果您对大屏幕和小屏幕(例如，手机和电视)使用媒体查询，您将需要更改它们的字体大小。

如果您将所有内容都设置为 em 大小，您可以简单地更改正文中的 font-size，如下所示:

    /* For TV's (or other large screens */
    @media screen and (min-width: 1800px) {
        body { font-size: 1.4em; }
    }

    /* For mobiles */
    @media screen and (max-width: 400px) {
        body { font-size: 0.9em; }
    }

如果您的所有尺寸都以 px 为单位，那么您必须做更多的工作来调整字体的大小。

编辑: 使用 em 作为边距 + 填充也可能是响应式布局的好主意，据我所知，如果您调整正文字体大小(如如上所示)，您还将调整边距 + 填充的大小(使它们变小或变大)，这对于响应式设计也非常有益。