适用于不同屏幕尺寸的建筑
Answers:
响应式设计（也称为“自适应”设计）是大多数网站的最强选择，在该设计中，同一网页根据浏览器的宽度提供两个或多个手工制作的布局的最佳版本。要了解原因，它有助于查看网页设计师可用的所有选项：
固定版面
固定的页面宽度（无论浏览器的宽度如何，内容宽度都是相同的），可在整个设备上提供统一的外观，并且比更灵活的设计所需的编码，思维和维护更少。
有些人认为固定宽度的布局是过去时代的遗物，人们渴望在所有浏览器中实现像素完美和外观统一。Hardboiled Web Design的作者Andy Clarke 认为这种思维方式已经死了：
“过去，通常的做法是努力创建一个在所有浏览器中看起来和工作都一样的网站，无论它们的功能如何。这样做意味着要做出妥协，并避免使用并非所有浏览器都支持的技术。
这是煮熟的吗？
甜心的脸，别开玩笑了。这不是发展我们的技术或建立更好的网络的方法。这种过时的思维使我们退缩。它迫使我们为没有做我们知道正确的事情找借口。作为目前的网络管理员，我们所能做的最糟糕的事情就是允许任何事情限制可能发生的事情。”
—安迪·克拉克（Andy Clarke），《沸腾的网页设计》，第6页 [ 此处提供 PDF版本]
尽管有些人将固定布局视为懒惰的高度，但非常聪明的设计团队仍会选择固定宽度的设计，而不是流畅的或自适应的布局。例如，Apple当前为iMac提供的布局与为iPad和iPhone提供的布局相同。为什么负责将移动Web浏览推向大众的公司没有针对移动设备优化其网站？
因为它认为不需要。
苹果没有改编其网站以适应小屏幕，而是构建了硬件和软件来舒适地处理这些屏幕上的宽大网站。苹果公司认为，“移动优化”的体验最好在本机应用程序而非浏览器窗口中提供。这就是为什么它提供Apple Store应用程序而不是为移动设备优化的Web商店提供服务的原因。这就是为什么它鼓励出版商在量身定制的网站上提供杂志应用程序的原因。苹果公司当前的网页设计理念很明确：一种布局将它们统统统治。对于其他所有内容，都有适用于此的应用程序。
仅出于这个原因，有人会争辩说固定的布局仍然像以往一样重要。他们会说，流畅的布局和自适应布局只是在我们等待移动浏览器软件改进，HTML和JavaScript不断发展并吸引开发人员远离孤立的应用程序商店时，才是空白。
不过，我认为，即使在iPhone上，在移动设备上任意长时间地在Web上进行点按，拖动和滚动滚动也根本没什么乐趣。如果您认为最佳的Web体验是使阅读，发布和与网站进行交互而不是繁琐的事情，而不管您使用的是哪种设备，那么您必须在某个时候承认为每种网站提供量身定制的内容访客值得考虑。
流体布局
流畅的布局（页面的宽度流到整个屏幕上（通常达到最大的宽度））通过提供更适合视口的宽度的内容来保证在不同平台上的更好体验。
实际上，如卡梅隆·莫尔（Cameron Moll）在这个技巧中所指出的那样，流体布局引起的问题多于解决的问题：
“ ...流体设计解决了每个布局问题，就像计算机使办公室无纸化（即他们没有）一样。”
-卡梅伦·莫尔（Cameron Moll），“所有地点都应该流动吗？”， 2006年9月
当您采用流畅的布局时，您将放弃对设计的控制，并接受文字会重新包裹，图像会重排，行长会以不可预见的方式变化，文字，图像和导航元素可能会以较小的宽度挤在一起，并且列会跳跃和浮动只是为了惹你
有人可能会说，流畅的布局也是一个懒惰的选择。这是自适应网页设计的the弹枪方法。与其提供三或四个经过仔细考虑的固定宽度设计的量身定制体验，不如提供一个不可预测的体验，希望它可以在大屏幕和小屏幕上运行，并希望填补所有您尚未充分考虑的空白在两者之间。
这不会使流畅的布局毫无用处。有一些方法可以使它们起作用。以456 Berea St博客为例，该博客采用了一种可变的布局，直到达到给定的宽度，然后再使用固定的布局进行更大的布局。而且边栏的宽度很小时，它会掉落以使用单个列，从而更容易在小屏幕上阅读。但是，这不再是一种灵活的布局。这是更好的东西。这是一个响应式设计。
响应式布局
“响应式”或“自适应式”布局（其中相同的网页根据访问者的浏览器宽度显示两个或多个精心设计的布局的一种版本）是逐步增强功能的关键部分，旨在使网站看起来最佳它可以为每个访客。
用Adaptive Web Design的作者Aaron Gustafson的话来说，选择采用自适应布局是“出色的客户服务” 。他说，如果我们精心设计网站，应该向访问者提供完美的体验，而不会意识到我们正在对他们大惊小怪：
“作为网页设计师和开发人员，我们应该努力做到与那个细心，不扰民的服务员一样出色，但这并不是一件容易的事。就像服务员不知道客户是否需要频繁进门一样，笔芯或少量笔芯时，我们无法得知特定用户到达我们网站时的需求，相反，我们必须满足这些需求。如果我们真的很擅长，那么即使没有客户，我们也无法意识到自己是值得庆幸的是，使用渐进增强功能的用户和以内容为中心的方法（而不是优雅降级的最新浏览器方法），这是很容易实现的。”
— Aaron Gustafson，《自适应网页设计》，第 12页[ 此处提供 PDF版本]
意识到我们作为Web设计师的工作是适应访客，而不是强迫他们适应我们-正如苹果可能会让我们相信的-这是Web设计中的一个相当新的发展。我认为这是一种复兴，我们已经完成了从多年印刷设计中挑选好习惯的过程。现在，我们必须抛弃在打印页面上预定义的空间内工作所产生的束缚。
在将浏览器视为固定画布之后，我们现在接受的是根本不存在已定义的画布，而从毫无疑问开始在访问者统计数据中看到的巨大屏幕尺寸中，这一点变得越来越清晰。与其将每个新设备视为要定位的唯一“页面大小”（然后在新设备问世时必须召集部队），我们可以遵循更多面向未来的约定。
我们可以从“大型”，“中型”和“小型”乐队的角度来考虑，而不是考虑特定的手机和平板电脑，然后设计站点以在这些乐队中表现最好。无论出现什么新设备，它们都会适合一个或另一个频段，并且-即使它们恰好位于两个频段之间的边界上-与使用固定或可变设备相比，我们对体验的控制更大布局。
在响应式网页设计中， Ethan Marcotte发出了以下呼吁：
“我们需要放手。
与其创建针对特定设备或浏览器量身定制的脱机设计，不如将它们视为具有相同体验的方面。换句话说，我们可以制作不仅具有更大灵活性而且可以适应呈现它们的媒体的网站。
简而言之，我们需要练习 响应式网页设计。我们可以采用网络固有的灵活性，而不必放弃设计人员所需的控制权。所有这些都通过在我们的工作中嵌入基于标准的技术，以及对在线设计的理念稍作改动来实现。”
— Ethan Marcotte，响应式网页设计，第 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）所预言的那样，直到在同一页面上看到这些设计，您甚至都不知道自己正在照顾自己。
在每种情况下，体验都不会比以前更令人愉快。您无需考虑页面或与页面进行交互就可以开始阅读内容，无需花时间想知道为什么它在屏幕上看起来很奇怪，也无需放大即可查看导航元素，然后再点击它们，因为有人已经解决了这些问题。您。而这也就是为什么响应式设计几乎总是胜过其他选项。
当前推荐的最佳方法是使用所谓的“响应式网页设计”，您需要使用一种方法来满足各种设备和屏幕尺寸/分辨率。
可以在http://www.mayfielddigital.co.uk/blog/web-round-up/best-sensitive-web-design-examples-and-上找到一篇概述响应式Web设计的方式，方式和原因的出色文章。资源/
这取决于样式如何影响您的设计。有许多因素，客户要求和第三方内容会限制您在规模方面的灵活性。
如果您可以构建一个看起来不错并且可以缩放为任意大小的所有用户高度使用的网站，那就太好了！
下一个选项是使样式具有最小宽度，该样式由某些元素（例如，垂直菜单，导航辅助工具或类似元素）决定，并调整主内容列的大小以填充剩余的可用空间。不过，根据某些内容（横幅广告，小部件，视频等），它并不总是那么容易。
大多数站点最终都采用了固定宽度的公分母布局。注意，我没有说最小公分母。如果查看您自己的数据或w3schools的数据，您会注意到85.1％的人的显示宽度超过1024像素，而98.9％的人的显示宽度至少为1024像素。考虑一下实现1024像素宽的布局的简易性和所需的工作量，以使1.1％的人不需要水平滚动，并且您将明白为什么这对于设计的网站来说是极为常见的选择。
当然，请考虑您的受众群体，它可能与w3schools的访问者不匹配。如果不满足您的需求，您也可能有意疏远更多的访客。Stuck In Customs的设计极为广泛，因为目标人群是对图形和照片感兴趣的人，这些人大多与大型显示器配合使用。这也使他们的经历更加大胆。