【问题标题】:Responsive design - percentages and pixels and ems响应式设计 - 百分比、像素和 ems
【发布时间】:2011-12-26 05:54:30
【问题描述】:

我开始构建一个应该响应不同屏幕尺寸的网站。我正在使用 Fluid Baseline Grid 模板,该模板使用列的百分比并使用媒体查询根据屏幕大小进行调整。现在我正在添加自己的自定义 CSS,我想知道是否应该使用像素、百分比或 em 来定位我的元素(在流体网格元素内)。例如,div 之间的边距和填充、输入字段的宽度等。字体大小和行高是使用 em 进行测量的唯一设置。

任何人都可以提供任何关于此的指针吗?目前,我倾向于仅在网格模板预设的基于百分比的布局中使用像素。

【问题讨论】:

    标签: css frontend responsive-design


    【解决方案1】:

    理想情况下,您应该尽可能使用百分比,至少在水平面上是这样,这样边距和内边距就可以按比例随其余内容扩展/收缩。 10px 边距在小分辨率下可能很好,但在更大的分辨率下可能看起来太紧了。

    【讨论】:

    • 感谢 Nate,这是有道理的。我一直在看一些网站,这些网站是为了响应而构建的,对于元素宽度、边距和填充,似乎在整个过程中混合使用了像素和百分比,这有点令人困惑——例如边距:30px 1% 0 0. 这种方法有什么理由吗?
    • 好吧,在margin: 30px 1% 0 0 的情况下,30px 被应用到上边距,而不是左边或右边。在没有看到设计的情况下,我会认为这是保持一致视觉流程的美学决定。 “响应性”在垂直方向上不是问题,因为在该方向上滚动是普遍接受的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-06
    • 1970-01-01
    • 2021-01-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多