网页宽度到底该怎么定 现场直击！

首先，网页设计的第一步是创建画布，这也是困扰我们的第一个问题。 由于市场上各种前端技术的应用，以及一些历史问题，设计方案的差异和其他因素，当我们寻找诸如“网页设计宽度”之类的问题时，获得的结果将会有很多 版本，导致更多的困惑。 因此，要了解网页设计宽度的定义，就要了解其根本原因，因为宽度设置：只有适当的宽度，没有绝对正确的宽度。 对于任何Web设计项目，宽度设置标准都是不同的，并且在选择宽度的过程中，需要考虑两个核心因素：下文，时至2020年09月15日概论网页宽度到底该怎么定，大伙赶紧来瞧瞧吧。

概论网页宽度到底该怎么定：

1。 设备因素设备因素是确定哪个屏幕设备是项目的主要显示内容，以及它们相应的分辨率是多少。 最粗略的划分可以将设备分为PC和移动设备。 两者在控制和显示的大小，系统限制以及设计和操作方面存在很大差异。 浏览设备浏览设备是网络用户使用的屏幕类型。 主要考虑因素是屏幕分辨率（长度和宽度上的像素数）。 常见的PC屏幕分辨率为1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440等，再加上一些不常见的分辨率（例如Surfacebook的3000×2000）。 列出其中的几十个，这是每个人都已经知道的。 因此，基于此前提，许多人会寻找有关屏幕分辨率的统计表，如下图所示，然后得出结论，最常用的分辨率是1080P。 有了数据支持，我们可以不开始设计吗？

实际上，这种方法是错误的。 对于网页设计，我们应该确定的第一件事是最小适配屏幕。 因为在一般情况下，如果显示分辨率大于画布，则我们可以正常访问内容； 如果它小于画布，则内容将显示不完整，这相当于放弃使用分辨率较低的设备的用户。

因此，为了进行简单的计算，如果以1920×1080为基础，则支持的用户数为27.38％。 如果是800×600，则支持的用户数少于3％。 考虑到这一点，我们应该仅支持最小的分辨率吗？ 当然不是。 如今，宽度小于1024的设备非常罕见。 即使本身就是1024，主流设备还是平板电脑，而不是普通的PC。 当这些设备的数量太少而无法成为绝对的非主流产品时，您可以选择忽略它们以满足更多人的需求。 因此，通常情况下，我们支持的最低分辨率为1024×768或1280×800。 如果您不相信，可以访问各种网站并使用QQ屏幕截图工具来测量主要内容区域的宽度。 很难出现大于这两个数字的数字。

2。 显示类型显示类型中只有两点，即宽度适合屏幕或固定宽度。 让我谈谈第一个。 许多人可能已经听说过响应式布局和自适应设计的名称。 无论它们之间有什么区别，它们代表的技术是网页的显示内容随浏览器窗口的大小而变化，例如使用Bootstrap体系结构的星巴克官方网站，更改浏览器窗口的宽度后，以下内容有所不同 可以获得结果。

如果您仍然需要通过此内容来学习网页的宽度，建议您不要

在实际项目中使用这种类型的显示。 因为他们都需要对前端体系结构有一定的了解，并且对CSS的属性有基本的了解，否则他们将无法在设计过程中直接考虑以其他分辨率显示的效果，并制定出自适应方法。 对于不同的元素。 响应式设计的规则非常灵活，并且会受到更多因素的影响。 完整的响应式界面设计将如上图所示，提供各种尺寸的设计图。 常见的宽度为1920、1080、640。 如果是固定宽度的设计，则返回上一个设计，我们只需要使用适合1280或1024的屏幕扩展设计即可。但是，该网页的实际内容区域与我们的范围不同 想要适应。 在浏览器中，首先，滚动条会在右侧产生影响，内部页边距应保留在主要内容的两侧。

因此，我们实际创建的网页的内容区域小于1280或1024.通过网页删除系统计算获得特定内容区域大小的方法。 网页删除系统源自平面网格系统，并且是网页的排版系统。 如果您已阅读此类文章，则将看到一个公式：（Axn）-i=W

这种方法是将内容区域划分为几个内容块和间隔 模块帮助我们进行排版的方式。 本文没有给出具体的介绍，只是注意结果。 如果选择适应1280，则设计内容的区域宽度通常为1180、1190。在适应1024的情况下，公共内容区域为950、970、990等。创建完全分辨率画布之后 ，我们可以通过参考线规划内容区域。

对于网页设计，最重要的参数是内容区域的宽度，但是有些元素是例外。 许多人可能会发现网页的某些元素超出了常规内容区域（无论是常规显示模式还是自适应模式），最常见的是顶部的导航栏和底部的页脚区域。 例如，无论淘宝拉伸多长时间，内容区域都固定为1190宽，但导航栏始终会填充整个浏览器。

因此，我们将不计算这些内容的宽度。 只要在设计草图中设计了这些元素，并且前端人员进行了适当的沟通和注释，就可以获得所需的效果。

假如看了上文，我觉得各位朋友应当掌握网页宽度到底该怎么定了吧，早已在上述文章为大伙儿作出了解读，坚信诸位看了以后应该可以弄懂呀。