1. 首页
  2. 问答
  3. css相对vs固定布局

css相对vs固定布局

2011-09-15 44 views
2

H！css相对vs固定布局

我已经了解到，在编写GUI时，特别是如果此GUI要在不同的操作系统上使用，不应该为程序窗口内的任何图形元素使用固定位置。这个原则通常在基础编程课程中教授，因为GUI在每个不同的操作系统上显示的方式稍有不同，并且强制固定坐标的元素可能会在某些机器上产生尴尬的后果。创建一个没有固定坐标的好看的GUI是没有问题的，因为在每个面向对象的API中都有布局对象（如Java中的GridLayout或BorderLayout）。我目前在一个网页上工作，我很惊讶地发现，可以在互联网上阅读关于CSS和HTML的内容恰恰相反！

我想创建一个看起来像这样的布局：http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-21-fixed-fixed/但是，这和CSS中的许多其他howtos使用固定或绝对坐标。是否可以在不指定分区或“面板”的确切位置的情况下重做此布局？有没有办法将这些子面板添加到主容器中，并让它们在添加了女巫的命令后自动按照给定的模式自行排列？

使用绝对/固定坐标真的是个好主意吗？创建我发布的布局的最佳方式是什么？

在此先感谢！

来源

2011-09-15 myname

回答

1

不是创建一个真正的设计是应该对所有浏览器，操作系统，设备和屏幕尺寸的所有用户的工作，这是更好的遵循Responsive Web Design的原理来实现与同几个不同的布局HTML和CSS。

Here's 41 great examples of responsive web design我建议你看看。在任何支持Web浏览器的CSS3中打开示例并调整其大小以查看页面如何响应。

来源

2011-09-15 14:54:31

+0

+1为超链接和指导，这是4年前，你有四年后的新网站的更新，现在呢？ – Sam

+1

@SamEftegari：当然。 [这篇关于html5rocks的文章]（http://www.html5rocks.com/en/mobile/responsivedesign/）是一个相当不错的介绍。 [Bootstrap]（http://getbootstrap.com/）现在也是一个非常常见的解决方案，可以获得一个现成的响应式设计网格，其中包含中断点。 –

1

网络行业对布局的“流动性”有不同的看法和实践，显然您使用的布局类型取决于您的内容和个人品味。您所描述的内容通常被称为“流体”或“液体”布局，当然也是常见做法之一，特别是现在有更多的人使用各种屏幕尺寸浏览网页。

正如@asbjoournu所提到的，现在已经扩展到“响应式”网页设计的领域，在那里你可能完全改变你的布局，比方说，如果你的网站在手机上浏览，桌面屏幕。

几乎肯定有可能获得您想要的布局，但我会先阅读流体和响应式网页设计，以便您了解需求和可能出现的问题（许多有用的现代技术对于响应良好的布局具有不同浏览器支持，例如特别是在较旧版本的Internet Explorer中）。

Here, for example, I've created a layout similar to the one you linked to，其中不是具有固定尺寸，而是整个内容调整为窗口的宽度。主要内容总是宽度的80％，而不是固定大小。正如您所描述的，我还添加了一批小“面板”，根据主内容div的宽度重新排列它们，从而填充尽可能多的宽度。

Layout Gala可能是一个有趣的资源给你。这是一种常见的标记，它有四十种不同的风格，展示了如何使用相同的源文档在纯CSS中实现各种固定和流畅的布局，而不是距离您提供的示例数百万英里。

来源

2011-09-15 15:02:47

+0

+1非常明确的答案和有用的链接以及一个你做的很好的例子！提问者Perhas也问（或者我想问）：当（或为什么）会选择设计一个固定的网站布局？ （除了更容易做） – Sam

1

对于您链接的特定布局，创建它非常简单，无需设置在大多数主流浏览器中都能正常工作和显示的绝对位置或固定位置。 This example here I made in jsFiddle是一个非常简单的固定布局，使用浮动但也给予设置宽度。

你有一个包装器，它可以容纳你所有的内容，并通过设置左右边距在汽车中央位置放置在窗口中。

您的标题填充了包装的全部宽度。

左边和右边的两列都设置为左侧浮动，下方有一个明确的修复，所以之后的任何内容都不会尝试并沿着它浮动。

而您的页脚以与页眉相同的方式显示。

这样可以很好地用作布局，但就像使用asbjornu链接的示例一样，一旦开始调整浏览器大小，由于包装的宽度为800px，因此一旦浏览器低于此大小，它就不会调整大小因为它是固定的。因此内容将被滚动到用户。对我来说，这不是一个大问题，因为我知道大多数人不会用一个小窗口浏览器查看我的网站，如果他们是那么他们很可能习惯于不得不滚动，因为很多网站都是这样制作的，并且大多数智能手机/平板电脑都会自动调整缩放功能以正确显示它，所以很多时候它并不是一个大问题。

但是当然有时候需要有响应/流体设计，它只是知道何时何地使用它。

来源

2011-09-15 15:16:07 Joe

相关问题

 相关问题