For the last 10 years the question of whether to use fixed or liquid layouts when designing a website has raged on in the web design world, with major design players on both sides of the proverbial fence.

在过去的10年的互联网设计领域中，使用“固定布局”还是使用“浮动布局”是一个人们经常争论的话题，双方都各执一词。

Recently though, as screen resolutions have increased dramatically, fixed layouts have all but replaced liquid, but there are still come major advantages to a liquid layout if designed properly.

最近，随着显示器迅速的更新换代，很多“固定布局”方式开始被“浮动布局”方式所取代。如果“浮动布局”设计的得体的话，它仍然是有很多优点的。

Preliminaries
前言

When I use the term "containing" elements, I'm referring to the columns or boxes that hold the text, images, and other content. Containing elements may have borders and background images, but are usually just the visual containers for the important content on the screen.

当我使用“containing[容器]”元素时，我提到了使用列和文本框来存放文本、图片和其他内容。“容器元素”可以包含边框和背景图片，但是，通常情况下，它一般都是用来包含重要内容的。

Fixed width layout
固定宽度布局

In a fixed layout, the size of each "containing" element on the webpage is specified exactly. The page will not change when you resize your browser window. It will essentially look the same on any browser or computer.

在“固定布局”中，每个“容器元素”的尺寸都是一个精确值。当你改变你的浏览器窗口大小时，页面的尺寸不会随之发生变化。所以，不管你在任何一台电脑上或任何一中浏览器上查看该页面，看到的尺寸大小都是完全相同的。

Liquid layout
“浮动布局”

In a liquid layout, the size of the containing elements changes depending on the browser size and user preferences. The container size increases when viewed at larger screen resolutions and decreases when the browser is resized.

使用“浮动布局”时没页面的尺寸大小会随着浏览器的尺寸大小和用户属性的改变而改变。当使用大尺寸显示器时，整个“页面容器”的尺寸会放大；当使用小尺寸显示器时，整个“页面容器”的尺寸会缩小。

Advantages and Disadvantages (pros and cons):
优点和缺点（正面性和负面性）：

Fixed width layout
固定宽度布局

Pros （正面性）

• Guarantees an easy to read line length
  
  确保每行内容的长度不变，易于阅读
  
  
• Allow images to be placed exactly in relation to other elements and type sizes
  
  允许图片根据其它元素或样式尺寸放置在一个精确的位置上
  
  
• Allows designer full control over how the page is displayed (as opposed to the user)
  
  允许设计师对页面的显示方式进行完全的控制（用户则不行）
  
  
• Allows for predictable default printing behavior.
  
  容易掌控输出的方式和风格
  
  

Cons （负面性）

• May create a type size that is not optimal
  
  不能确保永远处于最佳尺寸类型
  
  
• Takes control over page size and text size away from the user.
  
  用户不能对页面的尺寸和文本的尺寸进行控制
  
  
• Doesn't take advantage of screen real estate and may produce large unused portions of window space that could potentially increase the amount of scrolling users have to do (this is especially true at higher resolutions)
  
  不能够充分的利用显示器所有的空间，可能会在显示器上出现留白现象，从而导致用户不得不滚动滚动条才能浏览所有的内容（特别是在高分辨率下）。
  
  

Liquid layout:
“浮动布局”

Pros （正面性）

• Allows for maximum use of space or screen real-estate. Also allows the most control over sizing by the user, because a user can resize the website to their preferences.
  
  可以充分的利用显示器的所有空间，用户可以根据自己的需要对尺寸的大小进行控制；并且，用户可以根据自己通过设置参数来对网站进行尺寸设置
  
  
• Allows text size to be changeable by user preferences, making it easy for people with vision problems to increase or decrease the text size on the page while the layout adjusts around the increased size automatically.
  
  允许用户根据自己通过设置参数来对网站进行尺寸设置。这对存在视力障碍的人来说是一件非常好的事情。他们可以根据自己的需要对文本大小进行调整，同时，整个页面的布局也会随之自动调整。
  
  
• When designed correctly, it sets your website look slightly apart from competitors, considering most websites use a fixed layout.
  
  如果设计的考究，那么你的网站相对于那些使用“固定布局”的竞争对手而言会显得非常得体。
  
  

Cons （负面性）

• If the screen-size becomes too large or too small it can produce unreadable text, or hard to read/scan line lengths
  
  如果显示尺寸变的太大或是太小，那么，这可能导致部分文本无法阅读，或者出现一个很不协调、非常难于浏览的行宽。
  
  
• Can cause problems with default page printing. (A separate print style sheet can be used allowing for perfect printing from any page despite a liquid layout, but if a separate style sheet for printing is not provided this con is valid)
  
  如果是输出默认页面，那么也可能导致问题（尽管在“浮动布局”下，使用独立的输出样式表可以使每个页面都显示的完美无缺；但是，如果在不支持独立输出样式表的情况下，那么就会出现这个问题）。
  
  
• As the website size changes, the image size to text proportion may create a less desirable look.
  
  当网站的尺寸改变时，图片尺寸和部分文本尺寸可能会出现不协调的情况。
  
  

Modern Screen Resolutions and the Prevalence of Fixed Width Layouts
高级显示器分辨率和流行的“固定宽度”布局

The problem facing layout design in modern web design is the huge variance of common screen resolutions among potential website visitors. The smallest acceptable and still common modern resolution is 800 pixels wide by 600 pixels tall. With the recent surge in wide-screen and large monitors resolutions, a screen width of 1280 pixels plus is also very common.

现代网页设计中，这种布局面临的最大问题就是：潜在的网站访问者所使用的显示其分辨率已经发生了巨大变化。小部分人仍然愿意使用800pix*600pix；但是对于使用大尺寸显示器的访问者来说，使用1280像素*1024像素的分辨率也非常普遍。

Q. So how do you design a site that looks good with both a 800 pixel width and a 1280 pixel width?
问题：你应该怎样设计一个网站使其同时在800pix和1280pix的分辨率下都能具有很好的显示效果？

Most web designers don't, they use a fixed layout that's 800 pixels wide and call it good. With that said, I have personally designed and have seen some beautiful layouts that look good and are readable at both those resolution extremes. The specific details of these layouts are beyond the scope of this article, but most of the designs I've seen or created that successfully accomplish this task use multiple content columns in combination with "padding" that is defined as a percentage of the screen. So when the screen is small, the multiple columns are very close together, but when the screen is large the padding increases proportionally and the columns are spaced further apart.

大多数网站设计师都亲睐于使用800像素宽度的布局。对于上述这种说法，我也有自己的看法。我自己也设计过非常不错的布局方案，并且也看到过许多非常不错的布局案例，这些布局都是“浮动布局”，并且在任何分辨率下都可以很好的显示；如果谈到这类布局的具体细节部分，主要的问题还是文章尺寸的问题。但是我已经成功地解决了这些问题，具体方法就是：将内容多列显示，并用以百分比来定义的“padding”属性对它进行布局控制。所以，当显示器尺寸很小时，这些内容列之间的空隙就会相对较小，彼此紧靠；但是当显示器尺寸比较大时，这些内容列之间的空隙就会同比例增加，看上去就会宽松一点。

Recommendations and Analysis
建议和分析

Most websites should probably be designed with a fixed or "semi" fixed layout. It guarantees readability and perfect presentation of content. With that said, if your website contains a large amount of text based content (more then 3-5 paragraphs per page) or if the website would greatly benefit from a non-standard design scheme use liquid.

大多数网站都应该使用“固定布局”或“半固定布局”（即：部分内容固定，部分内容浮动）。这样可以确保内容的可读性，并有利于把它放在一个合适的位置上。但是，如果像上面所说的那样，你的网站包含很多的文章段落（如：每页多于3-5个段落），或者，如果网站可以从一个非标准的设计计划中受益，那么就使用“浮动布局”吧。

If you're still not sure, choose fixed. A fixed layout is easy to maintain, and assures readability by all users and is easier for a web designer to code perfectly. A poorly done liquid layout will cause more problems then it will fix and annoy potential users. For example, one of my personal pet peeves is when a designer uses a single column liquid layout. My personal computer workstation consists of two monitors a 19 inch, and a 17 inch wide screen. When a website is designed with a single liquid column the width of the page usually is way too wide for easy reading, so I have to manually adjust the window size.

如果你对上面说的这种情况不能够确定，那么还是选择“固定布局”比较好。“固定布局”易于维护，能够确保较强的可读性，也可以帮助网络设计师进行很好的代码布局。“浮动布局”的缺点就是，它可能很难对部分内容进行固定，从而导致用户看起来非常别扭。举个例子来说，我的一个好友非常不愿意看到的一种布局方式就是：设计师仅使用一列内容，并用“浮动布局”方式对其进行布局。就我个人而言，我准备了两台显示器，一台是19寸，一台是17寸。当网站使用“浮动布局”方式布局时，通常需要把页面全部展开才能保证一个较好的浏览效果，因此，我就不得不手动调整窗口尺寸大小。

评论 (0) All

登陆 | 还没注册？