“对于许多在UI行业工作的新手来说，PC端web设计是一个充满未知的领域。基本画布创建和规范设置将被隐藏。虽然这是因为大多数人没有系统学习UI的知识，但这并不是一个合理的现象。
接下来，我们将更新一些网站制作和设计干货，以帮助更多的用户界面设计师了解网页设计的基本知识。
首先，网站制作和设计的靠前步是创建画布，这是困扰我们的靠前个问题。由于多种前端技术在市场上的应用，以及一些历史问题、设计场景差异等因素，当我们搜索“网页设计宽度”等问题时，会出现很多结果，导致比较混乱。
因此，要了解网页设计的宽度定义，就必须了解其背后的原因，因为宽度是设定的：只有合适的宽度，没有绝对正确的宽度。
对于任何一个网页设计项目，设置宽度的标准都不一样，在选择宽度的过程中，需要考虑两个核心因素：
设备系数
设备因素是确定项目主要显示哪种屏幕设备以及相应的分辨率。粗略的划分可以将设备分为PC和mobile。两者都受到显示器尺寸和系统的限制。它们在设计和操作上有很大的不同。
浏览设备
浏览设备是web用户使用的屏幕类型。主要考虑的是屏幕分辨率（长度和宽度的像素数）。常见的PC屏幕分辨率有1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440等，再加上一些比较不寻常的分辨率（如surfacebook的3000x2000），可以列出几十种，这是大家都知道的。
所以基于这个前提，很多人都会找关于屏幕分辨率的统计表，比如下图，然后常用的分辨率是1080P，有了数据支持，我们可以开始手工设计了吗？
这实际上是错误的。对于网页设计，我们首先要确定的是屏幕的小尺寸。
因为在正常情况下，如果显示分辨率大于画布，我们可以正常访问内容；如果显示分辨率小于画布，则内容不会完全显示，这相当于分辨率低于此的设备用户。
所以，做一个简单的计算。按1920×1080计算，支持用户数为27.38%；按800×600计算，支持用户数小于3%。
考虑到这一点，我们应该支持小的决议吗？当然不是。
如今，宽度小于1024的设备非常罕见。即使是1024台，主流设备也是平板电脑，而不是普通的个人电脑。当这些设备的数量低到足以成为绝对非主流的时候，你可以选择忽略它们，以满足更多人的需求。
所以通常，我们支持的小分辨率是1024×768或1280×800。如果你不相信，你可以去各个网站，用QQ截图工具来测量主要内容区域的宽度。很难超过这两个数值。
显示类型
只有两种显示类型，即宽度适合屏幕，或宽度固定。
我们来谈谈靠前个。很多人可能听说过响应式布局，不管适应性设计的大牌是什么，不管它们有什么不同，它们都代表着显示网网站制作内容的技术，这些内容随着浏览器窗口的大小而变化。结果。
如果您仍然需要通过此内容学习网页宽度的开发，我不建议在实际项目中使用此类型的显示。因为他们都需要对前端架构有一定的了解，并对propert有基本的了解
否则在设计过程中不能直接考虑其他分辨率显示的效果，也不能为不同的元素开发自适应方法。
响应设计的规则是非常灵活的，并且会受到更多因素的影响。完整的响应式接口设计如上图所示，提供多种尺寸的设计图。常见的有19201080和640宽。
如果是固定宽度的设计，那么回到前面的点，我们只需要扩展设计以适应1280或1024屏幕。但是，网页的实际内容区域与我们要适应的范围不同。
在浏览器中，首先有一些因素影响右滚动条，并且必须保留主内容两边的填充。
因此，我们实际创建的网页的内容区域小于1280或1024。具体内容区域大小的计算方法由网页的网格删除系统来实现。
网页删除系统是从平面网格系统派生出来的网页排版系统。如果你读过这类文章，你会看到一个公式：
（Axn）-i=W
这种方法是通过将内容区域划分为几个内容块和空间模块来帮助我们排版。我不想在这篇文章中详细讨论，只关注结果。
如果选择适应1280，则设计内容的区域宽度通常为11801190。在1024的适配下，常见的内容区域有950、970、990等，当我们创建一个全分辨率画布时，我们可以用参考线规划出内容区域。
对于web设计来说，重要的参数是内容区域的宽度，但是有些元素是例外的。很多人可能会发现网页的某些元素超出了正常的内容区域（无论是一般显示模式还是自适应模式），常见的是顶部的导航栏和底部的页脚区域。例如，无论您打开6688多长时间，内容区域都固定为1190宽，但导航栏始终填充整个浏览器。
因此，我们不会计算这些内容的宽度。只要在设计稿中对这些要素进行了设计，与前端人员进行适当的沟通和标注，就能达到预期的效果。
总结
事实上，我谈了很多，后我们用一张表来总结。
这就结束了设置PC侧web网站制作与设计的介绍。如果您有任何问题，可以在评论区留言。
