在响应式设计中使用%单位有什么意义?

时间:2012-07-25 21:50:27

标签: css responsive-design media-queries

我正在重新设计我的网站,因为在不同的分辨率(分开的设备)上看起来很糟糕,大多数指南和教程都依赖于%em而不是固定值。我还在学习这个,所以我正在读周围的一切。

认为这可以解决不同显示尺寸的问题,但又一次:我们必须制作更多的CSS来修复一些特定的问题。

如果我需要为额外的显示尺寸添加媒体查询,为什么要使用%呢?使用%真的减少编码吗?是否需要为某些尺寸添加一些额外的CSS或我做错了什么?

感谢您的任何建议!

4 个答案:

答案 0 :(得分:4)

使用em尺寸的目的是允许您的设计基于用户选择的字体大小。我可能会使用更大的字体,因为我有一个巨大的显示器和视力不佳,而其他人可能更喜欢较小的字体。通过使用em单位,您的设计将适应我们的字体首选项并相应调整大小,而不是将字体大小强制为给定标准(例如“12磅字体”)。

以类似的方式,百分比(%)单位允许您的设计响应不同的浏览器大小。与em单位一起使用时,这将允许基于文本的元素响应任意字体大小选择,并允许布局元素响应任意浏览器大小。

为所有媒体类型设计单一的响应式设计是完全可以接受的。如果您希望在不同设备上使用不同的显示样式,以“支持”不同的显示尺寸,则会使用Media queries。一个例子是在印刷媒体上使用衬线字体,在显示媒体上使用无衬线字体,因为可用性研究表明这些字体面是这些类型媒体的首选。

此外,它允许您为某些情况(如移动设备)执行自定义样式,您可能需要考虑用户的带宽有限,并且可能会减少额外的图像。或者,如果您想以完全不同的布局显示您的内容,以便为某些手机提供微观屏幕。

答案 1 :(得分:1)

%可让您的网站响应用户的观看方式。假设您div位于100%。它将填满整个部分,无论是在手机还是桌面上。

也可以为大小添加额外的CSS。据我所知,您可以在%中显示一些元素,并且某些元素具有固定的px值,但它们可能会冲突,具体取决于页面的设置方式或内容正在观看它。

答案 2 :(得分:1)

例如。

您的网站标题宽度为950px;但在移动设备中,它可能适合450px;

因此,您使用media-query重新定位某些元素并处理一些大小问题并将标题宽度设置为450px;

但是,如果使用%值,则可以将标题div设置为在其父级中具有100%的宽度基数。所以你只能改变身体或一些容器div宽度,所有孩子都要适应。

答案 3 :(得分:1)

黛安娜,

我很高兴遇到这个问题。我真的只是上传了我的第一个响应式设计,它在字体大小和宽度方面占百分比的90%。

查看以下内容: http://www.noxinnovations.com/portfolio/responsive/

显然,它看起来并不令人惊讶,而且图像看起来不合适......但请帮我一个忙,并通过慢慢地使它变得越来越小来调整浏览器窗口的大小。我通过设置百分比宽度来做到这一点!

相信我,我尝试用像素进行这种响应式设计测试,结果并不太好。百分比宽度确保无论分辨率和/或像素尺寸(本身)如何,设计将始终迎合屏幕的大小。此外,我没有必要使用一个CSS3媒体查询,但我强烈建议仅在您需要时使用CSS3媒体查询。

在我看来,我应该有更大屏幕的媒体查询。

我希望这能帮助你,就像它帮助了我一样! 谢谢, 亚伦