定义您的网页的宽度

大多数设计人员在构建网页时首先考虑的是设计的分辨率 。 这实际上相当于决定你的设计应该有多宽。 作为一个标准的网站宽度,再也没有这样的东西了。

为什么要考虑决议

在1995年,标准的640x480分辨率显示器是最大和最好的显示器。 这意味着网页设计师专注于制作在网页浏览器中显示效果最佳的网页,并以该分辨率在12英寸到14英寸的显示器上最大化。

现在,640x480的分辨率占大多数网站流量的不到1%。 人们使用分辨率更高的计算机,包括1366x768,1600x900和5120x2880。 在许多情况下,为1366x768分辨率屏幕设计工作。

我们正处在网页设计史上,我们不必担心解决方案。 大多数人都有大屏幕宽屏幕显示器,他们不会最大化他们的浏览器窗口。 因此,如果您决定设计一个不超过1366像素宽度的页面,那么即使在具有更高分辨率的大型显示器上,您的网页在大多数浏览器窗口中也可能看起来不错。

浏览器宽度

在你离开之前思考“好吧,我会让我的页面宽度为1366像素”,这个故事还有更多。 在决定网页宽度时,一个经常被忽视的问题是客户的浏览器有多大。 具体来说,他们是最大化他们的浏览器在全屏幕尺寸还是他们保持他们比全屏更小?

在一次对所有使用公司标准1024x768分辨率笔记本电脑的同事进行的非正式调查中,两位保持所有应用程序的最大化。 其余的有不同尺寸的窗户因各种原因打开。 这说明,如果您设计的公司内联网的像素宽度为1024像素,则85%的用户将不得不水平滚动以查看整个页面。

在为最大化或不最大化的客户考虑后,请考虑浏览器边界。 每个网页浏览器都有一个滚动条和两侧边框,可在800x600分辨率下将可用空间从800缩小至约740像素或更少,在最大化窗口上以1024x768分辨率缩小980像素。 这被称为浏览器“铬”,它可以从您的页面设计的可用空间带走。

固定或液体宽度页面

实际的数字宽度并不是您在设计网站宽度时需要考虑的唯一事情。 您还需要决定是否有固定宽度或液体宽度 。 换句话说,你打算将宽度设置为特定数字(固定)还是百分比(液体)?

固定宽度

固定宽度的页面完全像他们的声音。 宽度固定在特定的数字,不管浏览器有多大或多小都不会改变。 如果您的设计看起来完全一样,无论读者的浏览器有多宽或很窄,但这种方法可能很好,但这种方法不考虑您的读者。 浏览器比您的设计窄的用户将不得不水平滚动,而具有宽浏览器的用户将在屏幕上留出大量空白空间。

要创建固定宽度的页面,只需使用特定的像素数字作为页面分部的宽度。

液体宽度

液体宽度页面(有时称为灵活宽度页面)的宽度取决于浏览器窗口的宽度。 这使您可以设计更专注于客户的页面。 液体宽度页面的问题是它们可能难以阅读。 如果一行文本的扫描长度大于10至12个字或短于4至5个字,则可能难以阅读。 这意味着具有大或小浏览器窗口的读者有困难。

要创建灵活的宽度页面,只需使用百分比或ems来表示页面分部的宽度。 您还应该熟悉CSS max-width属性。 这个属性允许你设置一个百分比的宽度,但是然后限制它,使它不会太大以至于人们无法读取它。

赢家是:CSS媒体查询

现在最好的解决方案是使用CSS媒体查询和响应式设计来创建一个页面,以调整浏览器查看它的宽度。 响应式网页设计使用相同的内容创建一个网页,无论您查看的网页是5120像素宽还是320像素宽,都可以使用。 不同大小的页面看起来不同,但它们包含相同的内容。 通过CSS3中的媒体查询,每个接收设备都会根据其大小回答查询,样式表会调整为特定的大小。