html - 响应式设计单元

Question

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

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

Answer 1

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

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

如果您的所有尺寸都在em's 中，您可以简单地更改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边距+填充对于响应式布局也可能是一个好主意，如果您调整正文字体大小（如上所示），您还将调整边距+填充（使它们更小或更大），这也可能对响应式设计非常有益。

Answer 2

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