代码之家  ›  专栏  ›  技术社区  ›  Srikar Appalaraju Tonetel

(固定宽度)vs(可变宽度)网站设计

  •  3
  • Srikar Appalaraju Tonetel  · 技术社区  · 14 年前

    我正在学习如何设计一个网站。其中一个决定似乎是如何将数据呈现给用户,即在存在不同的显示器尺寸的情况下,是将数据结构为占据整个屏幕(即GMail)还是使其固定宽度,即选择标准显示器尺寸(1024x768),并使其在所有显示器上显示相同(即StackOverflow)。

    我倾向于变宽度设计,我试图理解的是,这个设计决定对编程有什么影响?i、 e.当我用可变宽度设计(具体来说是CSS的使用)编程一个网站时,我需要记住什么?

    2 回复  |  直到 14 年前
        1
  •  2
  •   AgentConundrum    14 年前

    我不是一个设计师,但我正在做一个我自己的网站,我目前正在建设的设计。把我在下面说的每一句话都拿上两大粒盐。

    Gmail实际上作弊( <div> 当窗口宽度改变时,元素的宽度会在Javascript中重新定义),但原则上这种设计是可行的,因为侧边栏是已知的数量,动态内容包装良好。这意味着他们可以将侧边栏以固定的宽度插入,然后使用边距来确保中间的内容不会与这些侧边栏重叠。如果内容太大,它只会换行到下一行,没有人会在意,因为它通常是自由格式的文本。如果你的网站在其主要内容块中有很多内容,其中存在内容溢出其容器的真正危险,可变宽度可能不是正确的调用。有专家可以使这些类型的设计工作,但如果你只是刚开始,你可能不想尝试。我试过了,但结果让我很沮丧。

    需要注意的是,您需要知道,您选择的字体大小并不总是所使用的字体大小。用户可以更改浏览器使用的默认字体大小,使其比您预期的大,从而使您的内容再次跳出其框。我想解决这个问题的方法是经常使用浏览器的文本缩放功能来测试设计,并确保当字体增加3-4倍时,一切看起来都是合理的。

    至于选择“标准监视器大小”,现在的常见做法是将站点宽度定义为960px,give或take。这是一个1024px宽度的视窗的正确大小,一旦你考虑浏览器浏览器浏览器(如垂直滚动条)。如果有很多用户可能仍然使用800x600分辨率,请改用760px设计。还是有点建议你确保你的关键内容适合760像素以防万一,并使用剩下的200像素为较不重要的内容。

    希望能有帮助。

        2
  •  0
  •   Valentin Flachsel    14 年前

    尽管我通常对最外层的包装使用固定宽度,但我仍然使用百分比宽度来编码内部元素(不管怎样,除了必须具有固定宽度的元素之外,大多数都是这样)。如果客户想要一个全宽度的网站,只需要改变一个值。

    我认为最终,这只是个人喜好的问题,不管是你的还是你客户的。