响应式设计单位

Question

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

在设计中，基于“em”的字体大小/行高和填充/边距。我想知道为智能手机选择基于“em”的字体大小和填充以进行自适应布局是不错的选择？

Answer 1

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

E.g。如果你对大屏幕和小屏幕（比如手机和电视）使用媒体查询，你会想要改变它们的字体大小。

如果您在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作为边距+填充也可能是响应式布局的好主意，据我所知。你还可以调整边距+填充（使它们更小或更大），这对于响应式设计也非常有用。

Answer 2

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