虎课网为您提供字体设计版块下的B端画布的创建尺寸大小-从零开始学B端设计图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解B端画布的创建尺寸大小，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复。

那我们开始今天的教程吧。

1.UI设计和客户端显示器的分辨率有非常大的关系，在市面上，常规的显示器分辨率数量就下面几类。

2.有768×1024，720×1280，768×1366，900×1440，1050×1680，1080×1920，1440×2560，2160×3840，这些都是日常接触到，看到的，根据实际像素占比画出区域，不同分辨率之间的可视的内容和面积差异是非常大的。

3.不同分辨率之间的区别，平板中正常用768×1024和720×1280，笔记本中常用720×1280，768×1366，900×1440，1050×1680，1080×1920，显示器常用1080×1920，1440×2560，2160×3840。

4.我们开始研究，不同客户端设备的分辨率的占比，不同客户端设备的分辨率不同，占比也不同。

5.不同分辨率的占比最多的是1080×1920，这个几乎是没有什么疑问的，在市面上的占比也非常高。

6.1080P是目前使用数量最多的分辨率，1080P理论上是市场上占比最大应用的群体，但1080P的以下的实际用户总量同样不能被忽略。

7.我们看看比如说MacBook Air是800×1280，MacBook Pro 16是960×1536，Surface Pro 8是960×1440，Surface Laptop Studio是800×1200，实际显示的分辨率绝对不是1080×1920。

8.同时，网页的画布尺寸并不是分辨率决定的，网页的“视图窗口View”指的是浏览器的内容区域。

9.打开网页并没有全屏，分辨率和网页不匹配是非常正常的，日常使用都会出现这种情况。

10.同时，内容区域会受到浏览器和系统组件影响，在高度上，会减去浏览器顶栏、系统栏的高度。

11.定宽模式是我们在设计一个网页的过程，打开一个网站，在拖拽网站的时候，会发现网站中间的内容没有一点变化。

12.响应模式是打开一些网站，看一些项目，拖拽浏览器的时候发现里面的东西发生改变，这是它进行的对应的适配原则。

13.如何制定B端定宽模式，定宽模式的场景是在统一的设备统一的环境下，不用考虑适配不同的环境，（1）调查用户的主要使用方式和分辨率，（2）然后根据要适配的最小尺寸进行设计。

14.响应模式（1）有限确定要支持的最小尺寸是多少，（2）然后从最小尺寸做起，并制定响应逻辑。

15.所以有很多人有疑问，为什么要从小的尺寸开始做起？这里我们就来解答一下这个问题。

16.原因1，响应式的制定逻辑中，从小到大适配容易，但是从大到小适配非常困难，问题无数。

17.原因2，分辨率是有欺骗性的，多数目标用的实际电脑分辨率小于1080P，1080P以下用户总数高于1080P。

18.原因3，1080P过大，画布很难处于100%显示模式，过大的画布对于新手来讲容易过度填充内容。

19.越大的画布设计起来越困难，尤其是对于新手来讲，驾驭不住它，做出来的东西就会越奇怪，给大家实际项目的设计建议。

20.常规项目是1280×620/1440×800，特殊项目是1920×980，特殊项目是特殊的场景中宽度已经定死了，高度尽量减去100。本节课就到这里结束了，谢谢大家！

以上就是B端画布的创建尺寸大小-从零开始学B端设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！