响应式设计单元答案

【问题标题】：Responsive design unit响应式设计单元
【发布时间】：2012-12-10 14:14:01
【问题描述】：

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

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

【问题讨论】：

标签： html css web-applications responsive-design

【解决方案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 作为边距 + 内边距也可能是响应式布局的好主意，据我了解，如果您调整正文字体大小（如上所示），您还会调整边距和内边距（使它们变小或变大），这对于响应式设计也非常有益。

【讨论】：

使用 em 作为宽度/填充/边距会影响站点的断点吗？
断点如 (max-width 400px ) 所以智能手机断点为 400px。
不，使用 em 调整大小不会影响 CSS 中的媒体查询

【解决方案2】：

是的，使用 em 和 % 而不是 px 对于响应式设计网站/应用程序肯定更好，因为与 px 是绝对值不同，em 可以根据查看的分辨率进行缩放如果您想定位智能手机、平板电脑等，这一点至关重要。

【讨论】：