css – 响应布局 – PX,EM或%?

前端之家收集整理的这篇文章主要介绍了css – 响应布局 – PX,EM或%?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个响应式的页面布局,它的工作原理很好,但我有一个问题:

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

例如,我想要将边框半径应用于元素.我应该用这个代码

border-radius: 1.563em;

或这个:

border-radius: 25px;

我应该使用ems做类似的属性还是应该用px贴?

解决方法

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

如果您使用基于px的媒体查询,那么your layout may end up looking like crap when the user zooms.不幸的是,我知道一切都很好,因为我也犯了这个错误.

关于border-radius的例子,当字体大小增加时,你可能会发现这两个方面看起来真的不同 – demo.第一个和第三个使用边框半径的px,而第二个和第四个使用em.

但是会有例外情况,如果缩放时感觉不到(例如,一个看起来夸张的盒子阴影),请尝试使用px.

还要检查this article.

猜你在找的CSS相关文章