西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
PC端网页设计对于很多UI行业的新人来说是一个陌生的领域。 他们对如何创建基本画布和设置规格感到困惑。 虽然这是因为大多数人没有系统学习UI知识，但这并不是一个合理的现象。
接下来我们会更新一些关于网页设计的有用信息，帮助更多的UI设计师了解网页设计的基础知识。
首先，网页设计的第一步就是创建画布，这也是困扰我们的第一个问题。 由于市场上多种前端技术的应用，以及一些历史问题、设计场景差异等因素的影响，当我们搜索“网页设计宽度”等问题时，会得到很多版本的结果，导致更加混乱。
因此，要了解网页设计中宽度的定义，就要了解其背后的原因，因为宽度的设定：只有合适的宽度，而没有绝对正确的宽度。
对于任何一个网页设计项目，宽度设置的标准都是不同的，在选择宽度的过程中，需要考虑两个核心因素：
1、设备因素
设备因素是为了确定项目主要显示在哪些屏幕设备上以及对应的分辨率是什么。 最粗略的划分可以分为PC端和移动端。 两者受到显示器尺寸和系统限制，在设计和操作上有很大不同。
浏览设备
浏览设备是网络用户使用的屏幕类型。 要考虑的主要标准是屏幕的分辨率（长度和宽度的像素数）。 常见的PC屏幕分辨率有1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440等，再加上一些比较不常见的（比如surfacebook的3000×2000），你可以列出来几十个，这是每个人都已经知道的事情。
所以基于这个前提，很多人都会去寻找有关屏幕分辨率的统计表，比如下图，然后得出结论，最常用的分辨率是1080P。 有了数据支持，我们就不能开始设计了吗？
事实上，这种做法是错误的。 对于网页设计，我们首先要确定的是最小屏幕尺寸。
因为一般场景下，如果显示分辨率大于canvas，就可以正常访问内容； 如果小于画布，内容将无法完全显示，相当于放弃了分辨率低于此的设备的用户。
因此，简单计算一下，如果以1920×1080为基准，则支持的用户数为27.38%； 如果是800×600，则支持的用户数不到3%。
如果我们这样想的话，是不是只要支持最小分辨率就可以了呢？ 当然不是。
如今，宽度低于 1024 的设备非常罕见。 即使本身宽度为1024，主流设备也是平板电脑而不是普通PC电脑。 当这些设备的数量如此之少以至于它们变得绝对非主流时，您可以选择忽略它们来满足更多人的需求。
所以通常，我们支持的最低分辨率是 1024×768 或 1280×800。 不信的话，你可以去各个网站，用截图工具测量一下主要内容区域的宽度。 很难超过这两个值。
2. 显示类型
显示类型只有两点，即宽度适应屏幕，或者宽度固定。
我们先来说第一个。 很多人可能听说过响应式布局和自适应设计的名字。 不管它们有何不同web网页设计跨境独立站，它们都代表着随着浏览器窗口大小的变化而改变网页显示内容的技术，比如星巴克官网采用Bootstrap架构，改变浏览器窗口宽度后，可以得到以下不同的结果。
如果你还需要通过本内容学习网页宽度设置，我不建议在实际项目中使用这种显示类型。 因为它们都需要对前端架构有一定的熟悉，并且对CSS的属性和特点有基本的了解。 否则，他们在设计过程中无法直接考虑其他分辨率下的显示效果，并制定针对不同元素的自适应方法。
响应式设计的规则非常灵活，会受到更多因素的影响。 完整的响应式界面设计会提供如上图所示的各种尺寸的设计图。 常见的有1920、1080、640宽。
如果是固定宽度的设计，那么回到之前所说的，我们只需要扩展设计以适应1280或1024的屏幕即可。 然而网页的实际内容区域与我们想要适配的范围是不同的。
在浏览器中，首先有右侧滚动条的因素，主要内容的两侧必须预留padding。
因此，我们实际创建的网页的内容区域是小于1280或者1024的。获取具体内容区域大小的方法是通过网页的网格删除系统来计算的。
网页删除系统源自平面网格系统web网页设计web网页设计；如何确定网页宽度？ 这篇全面又好的文章告诉你！，是一种用于网页的排版系统。 如果你稍微读过这类文章，你会看到一个公式：
(Axn)-i = W
这种做法是通过将内容区域划分为若干个内容块和区间模块来辅助我们排版。 本文不做详细介绍，只关注结果。
如果选择适配1280，设计内容的区域宽度通常为1180或1190。适配1024时，常见的内容区域宽度为950、970、990等。当我们创建完全分辨率画布后，然后我们可以使用指导线来规划内容区域。
对于网页设计来说，最重要的参数是内容区域的宽度，但也有一些例外。 很多人可能会发现网页的某些元素超出了正常的内容区域（无论是正常显示模式还是自适应模式）liquid开发，最常见的是顶部的导航栏和底部的页脚区域。 例如，无论你打开淘宝多久，内容区域始终是1190宽，但导航栏始终填满整个浏览器。
因此，我们不会计算这些内容的宽度。 只要在设计稿中设计好这样的元素，并与前端人员进行适当的沟通和标注，就可以得到理想的效果。
总结
其实我们聊了很多，最后用一个表格来总结一下。
PC端网页设计宽度设置的介绍到此结束。 如果有任何疑问，可以在评论区留言。
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。