响应式布局 - PX、EM 或 %? [英] Responsive Layout - PX, EM, or %?

问题描述

我正在构建一个响应式页面布局，到目前为止效果很好，但我有一个问题:

I am building a responsive page layout and it works great so far, but I have a question:

我应该使用 em、px 还是 %?

Should I be using em, px or %?

例如，我想将边框半径应用于元素.我应该使用此代码:

For example, I want to have border radius applied to an element. Should I use this code:

border-radius: 1.563em;

或者这个:

border-radius: 25px;

我应该将 em 用于类似的属性还是应该坚持使用 px?

Should I be using ems for similar properties or should I stick with px?

推荐答案

一般来说，不要将 px 用于响应式布局.

Generally, don't use px for responsive layouts.

如果您使用基于 px 的媒体查询，则 当用户缩放时，您的布局可能最终看起来像废话.不幸的是，我很清楚因为我也犯了那个错误.

If you use a px-based media query, then your layout may end up looking like crap when the user zooms. And unfortunately, that I know all to well because I made that mistake too.

关于 border-radius 的示例，当 font-size 增加时，您可能会发现两者看起来非常不同 - 演示.第一个和第三个使用 px 作为边界半径，而第二个和第四个使用 em.

Regarding your example with border-radius, you may discover the two look really different when the font-size is increased - demo. The first and the third use px for border-radius, while the second and the fourth use em.

但是会有例外，如果缩放时感觉不对(例如，看起来有些夸张的 box-shadow)，请尝试使用 px 作为嗯.

But there will be exceptions and if something doesn't feel right on zoom (for example, a box-shadow that looks exaggerated), try it with px as well.

另请查看这篇文章.

这篇关于响应式布局 - PX、EM 或 %?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！