响应式设计单元

Question

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

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

Answer 1

我认为em在响应式设计方面的主要优势是你可以很容易地改变不同屏幕大小的字体大小。

例如，如果你对大屏幕和小屏幕(比如手机和电视)使用媒体查询，你会想要改变这两个屏幕的字体大小。

如果你有所有的em大小，你可以简单地改变body上的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

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