适用于不同屏幕尺寸的建筑

#1 楼

响应式设计（也称为“自适应”设计）是大多数网站的最强选择，其中相同的网页根据浏览器的宽度提供两个或多个手工制作的布局的最佳版本。要知道为什么，它有助于查看可供Web设计人员使用的所有选项：
固定版式
固定的页面宽度（无论浏览器的宽度如何，内容宽度都相同）提供统一的外观并感觉到跨设备，并且比更灵活的设计需要更少的编码，思考和维护。
有些人认为固定宽度的布局是过去时代的遗物，人们渴望在所有浏览器上实现像素完美和外观统一。 Hardboiled Web Design的作者安迪·克拉克（Andy Clarke）认为这种想法已经死了：在所有
浏览器中的外观和工作方式都是相同的-无论他们的
功能如何。这意味着使
妥协并避免使用并非所有
浏览器所支持的技术
这难道不是吗？
别骗自己了，亲爱的脸颊。这
不是发展我们的工艺或建立更好的网络的方式。
br老式的思维使我们退缩。
它迫使我们为没有做的事情找借口
做我们知道的事情是正确的事情。 />网络的监护人可以做的是
允许任何事情来限制可能发生的事情。”
虽然有些人将固定布局视为懒惰的高度，但非常聪明的设计人员仍选择固定宽度的设计gn团队负责灵活或自适应的布局。例如，Apple当前为iMac提供的布局与为iPad和iPhone提供的布局相同。为什么负责将移动Web浏览推向大众的公司没有针对移动设备优化其网站？
，因为它认为不需要这样做。
苹果没有改编其网站以适应小屏幕，而是构建了硬件和软件来舒适地处理这些屏幕上的宽大网站。苹果公司认为，“移动优化”的体验最好在本机应用程序而非浏览器窗口中提供。这就是为什么它提供Apple Store应用程序而不是为移动设备优化的网络商店提供服务的原因。这就是为什么它鼓励出版商在量身定制的网站上提供杂志应用的原因。苹果公司当前的网页设计理念很明确：一种布局将它们统统统治。对于其他所有功能，都有一个应用程序。他们会说，灵活的布局和自适应布局只是在我们等待移动浏览器软件改进，HTML和JavaScript不断发展并吸引开发人员远离孤立的应用程序商店时出现的空白。
在我看来，即使在iPhone上，在移动设备上任意长时间地在网络上轻按并拖动滚动也根本没什么乐趣。如果您认为最佳的Web体验是使阅读，发布和与网站进行交互而不是繁琐的事情，而不管您使用的是哪种设备，那么您就必须在某个时候承认要提供针对每种内容量身定制的内容访客值得考虑。
流体布局
流体布局，页面的宽度流到整个屏幕上（通常达到所施加的最大宽度），通过以一定的宽度交付内容，可以保证跨平台的更好体验实际上更适合视口。
正如卡梅伦·莫尔（Cameron Moll）在此设备中所指出的那样，实际上，流体布局引起的问题多于解决的问题： />问题与计算机几乎相同
使办公室无纸化，即它们
不要。”
-卡梅伦·莫尔，“所有场所都应该流动吗？”，2006年9月，

当您采用流畅的布局时，您将放弃对设计的控制，并接受文字将重新包裹，图像将重排，行长将以不可预见的方式变化，文字，图像和导航元素可能会以较小的宽度挤在一起，并且列会跳跃和浮动
有人可能会说，流畅的布局也是一个懒惰的选择。它是自适应网页设计的the弹枪方法。与其提供三或四个经过仔细考虑的固定宽度设计的定制体验，不如提供一种不可预测的体验，希望它可以在大屏幕和小屏幕上运行，并希望填补所有您尚未充分考虑的空白在这两者之间。
这不会使流畅的布局无效。有一些方法可以使它们起作用。以456 Berea St博客为例，该博客采用了一种既定宽度的给定布局，此后对于更大的对象使用固定的布局。而且，如果宽度很小，则侧边栏会下降，以使用单个列，从而更易于在小屏幕上阅读。但是，这不再是一种灵活的布局。这是更好的东西。这是一种响应式设计。
响应式布局
“响应式”或“自适应”布局-根据访问者的浏览器宽度，同一网页上会显示两个或多个精巧布局的一个版本。渐进式增强的关键部分，旨在使每个访问者都能获得最佳的网站外观。
根据Adaptive的作者Aaron Gustafson的话，选择采用自适应布局是“出色的客户服务”。网页设计。他说，如果我们精心设计网站，应该向访问者提供完美的体验，而不会意识到我们正在对他们大惊小怪：

“作为网页设计师和开发人员，我们应该努力做到与那个细心，不扰民的服务员一样出色，但这并不是一件容易的事。就像服务员不知道客户是否需要频繁进门一样，笔芯或少量笔芯时，我们无法得知特定用户到达我们网站时的需求，相反，我们必须满足这些需求。如果我们真的很擅长，那么即使我们的客户没有意识到自己正在值得庆幸的是，通过渐进增强的用户和以内容为中心的方法（而不是优雅降级的最新浏览器方法），这很容易实现。“
-Aaron Gustafson，自适应Web设计，第12页[PDF版本可在此处找到。

认识到我们作为网页设计师的工作是适应访问者，而不是强迫他们适应我们-正如苹果可能会让我们相信的-这是一个相当近期的发展。网页设计。在我看来，这是一种复兴：从多年的印刷设计中，我们已经完成了樱桃采摘的好习惯。现在，我们必须抛弃在打印页面上的预定义空间内工作所带来的束缚。
在将浏览器视为固定画布之后，我们现在接受的是根本不存在定义的画布，这就是毫无疑问，从庞大的屏幕尺寸组合中您将越来越清楚地看到您的访问者统计信息。与其将每个新设备视为要定位的唯一“页面大小”（然后在新设备问世时必须召集部队），我们可以遵循更多面向未来的惯例。
我们可以从频段的角度考虑- -“大”，“中”和“小”-不用考虑特定的手机和平板电脑，而是设计网站以使其在这些乐队中表现最好。无论出现什么新设备，它们都会适合一个或另一个频段，而且-即使它们恰好位于两个频段之间的边界上-与使用固定或可变设备相比，我们对体验的控制更大布局。
在响应式网页设计中，Ethan Marcotte提供了这样的呼吁：

“我们需要放手。 >设备或浏览器，我们应该
将它们视为具有相同体验的方面
。换句话说，我们可以
设计不仅灵活，而且可以适应
呈现它们的媒体。
简而言之，我们需要实践
响应式网页设计。我们可以拥抱
网络固有的灵活性，
在不放弃控制权的情况下，我们是设计师的全部要求。所有工作都通过将基于标准的技术嵌入到我们的工作中，并且通过稍微改变我们对在线的理念来实现。 > design。“
— Ethan Marcotte，响应式Web设计，第8页[此处提供PDF版本]

但是您使用什么频段？ Ethan Marcotte在“响应式Web设计”中推荐以下三个。 （要了解他们的工作并了解这些警告，您可能会喜欢这本书。）

@media screen and (max-width: 768px) { 
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}

还有一系列CSS框架旨在帮助构建自适应网站，包括Joni Korpi的Less框架。
与其使用任意断点，不如让您的网站的设计来决定频段，这可能更好。减小浏览器的屏幕宽度，只要设计中断，该宽度就应该是您的“断点”之一。不断减小宽度，并通过CSS媒体查询添加断点，直到您的设计在所有宽度上看起来都不错为止。这样一来，您的设计将在所有设备上看起来都不错，而不仅仅是您尝试使之适应的少数屏幕尺寸。如果您使用的是Chrome浏览器，则打开开发人员工具（“视图”>“开发人员”>“开发人员工具”）并减小浏览器宽度，即可在右上角获得当前宽度的有用读数，可用于确定断点应在哪里。
另一个可以考虑的流行方法是Mobile First响应式设计，其中核心样式表处理最小设备的样式，媒体查询处理更大的屏幕宽度，而不是相反。这可以提高移动设备的性能，特别是在使用大量CSS背景图像的情况下。 （您可以以相同的方式构造断点-只需从浏览器宽度最小开始，然后向上扩展即可。而且不要忘了在尽可能多的实际设备上进行测试-考虑访问开放式设备实验室。）
简而言之，当做得好时，自适应设计是作为网页设计师和公共花园网络用户所能看到和体验的乐趣。以日本公司Information Architects的网站为例：
在iPhone上

在iPad上

在iMac上

/>就像亚伦·古斯塔夫森（Aaron Gustafson）所预言的那样，在同一页面上看到设计之前，您甚至都不知道自己正在照顾自己。
在每种情况下，体验都很难过；您无需考虑页面或与页面进行交互即可开始阅读内容，无需花时间思考为什么它在屏幕上看起来很奇怪，也无需放大即可查看导航元素，然后再点击它们，因为有人已经解决了这些问题。您。这就是为什么自适应设计几乎总是胜过其他选择的原因。

评论

---

这是一个非常棒的答案。前面我已经对几个答案说过“使用响应式设计”。问题可能与此完全不同，以至于看起来不像是重复，但是我认为下次出现时，我会指出人们在这里。

–paulmorriss
2011年6月17日下午13:20

---

我认为可以肯定地说这个答案将是我们在出现类似问题时为用户提供的资源。

–John Conde♦
2011年6月17日下午13:28

---

评论+10，因为我只能+1答案。

–克里斯·克鲁伊斯（Chris Kluis）
2011年6月21日13:57

---

令人印象深刻的反应。我在上面同意约翰·康德的观点，认为这可以作为将来类似问题的参考。

–格兰特·佩林
2011年6月22日20:50

---

#2 楼

流畅的布局是最容易创建和维护的。然后，您还可以使用移动样式表来“修复”在非常小的设备中可能出现的任何问题。

#3 楼

我会使用两个样式表。

一个样式表可以满足大多数常规台式PC用户的需求。

另一个用于移动。

#4 楼

当前推荐的最佳方法是使用“响应式网页设计”，您需要通过一种方法满足各种设备和屏幕尺寸/分辨率。

一篇很棒的文章概述了方法，方法和响应式Web设计的原因可以在以下网址找到：http://www.mayfielddigital.co.uk/blog/web-round-up/best-sensitive-web-design-examples-and-resources/

#5 楼

这取决于样式如何影响您的设计。有很多因素，客户要求和第三方内容会限制您在规模方面的灵活性。

如果您可以构建一个看起来不错并且可以扩展到所有用户的高度可用的网站，

下一个选项是使样式的最小宽度取决于某些元素，例如垂直菜单，导航辅助等，并将主内容列的大小调整为填充剩余的可用空间。不过，根据某些内容（横幅广告，窗口小部件，视频等）并不总是那么容易。

大多数站点最终使用的是固定宽度的公分母布局。注意，我没有说最小公分母。如果您查看自己的统计数据或w3schools的统计数据，会发现85.1％的人的显示宽度超过1024像素，而98.9％的人的显示宽度至少为1024像素。考虑一下实现1024像素宽的布局的简易性和所需的工作量，以使1.1％的人不需要水平滚动，并且您会明白为什么这对于设计的网站来说是极为常见的选择。

当然，请考虑您的受众群体，它可能与w3schools的访问者不匹配。如果他们不能满足您的需求，您也可能有意疏远更多的访客。 Stuck In Customs的设计极为广泛，因为目标人群是对图形和照片感兴趣的人，这些人大多与大型显示器配合使用。这也使他们的经历更加大胆。