响应布局 - PX，EM或％？ [英] Responsive Layout - PX, EM, or %?

问题描述

我正在构建一个响应式页面布局，它的工作原理到目前为止，但我有一个问题：

我应该使用em，px还是％？

例如，我想对一个元素应用边框半径。应该使用此代码：

  border-radius：1.563em; 
  

或：

  border-radius：25px; 
  

我应该使用ems作为类似的属性还是应该使用px？

解决方案

一般来说，对于响应式布局不要使用 px 。

如果您使用基于 px 的媒体查询，则您的布局可能最终看起来像垃圾当用户缩放。

关于你的例子 border-radius ，当 font-size 增加时，您可能会发现两者看起来真的不同 - 演示 。第一个和第三个对border-radius使用 px ，而第二个和第四个使用 em 。

但是会有异常，如果某些东西在缩放时感觉不正确（例如，一个 box-shadow

也请检查本文。

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

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;

Or this:

border-radius: 25px;

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

解决方案

Generally, don't use px for responsive layouts.

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.

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.

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.

Also check this article.

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