响应式设计单元

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

设计中有“em”字体大小/行高和填充/边距。我想知道为智能手机的响应式布局选择“em”字体大小和填充效果是不错的选择？

2012-12-10 Wasim Shaikh

我认为在响应式设计方面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页边距+填充也可能是一个负责任的布局是一个好主意，我的理解是，如果你调整身体字体大小（如上图所示），你还可以调整利润+填充（使它们更小或更大），这对于响应式设计也是非常有益的。

来源

2012-12-10 14:30:14 Sean

使用em作为宽度/填充/边距是否会影响网站的缺口？ –

breapoints？你的意思是断点？如果是这样，我不知道 – Sean

断点像（最大宽度400px），所以智能手机断点400px。 –

是，使用EM和%超过px是响应式设计的网站/应用一定要好，因为不像px这是一个绝对值，em可以根据它在其中看到的分辨率是至关重要的，如果你想要的目标比例智能手机，平板电脑等

来源

2012-12-10 14:21:28 lifetimes

响应式设计单元

回答

相关问题