多终端产品 - 解析原型画布尺寸和界面尺寸（中）-京东云开发者社区

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/55d46fb1-dc5d-4380-a0cf-9aae2adca32220210122104317.gif)</center>

### PC端网页设计画布尺寸和界面尺寸

首先，什么是PC端？据百度百科介绍：

##### PC（Personal Computer）个人计算机：是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。

也有称PC端为桌面端或电脑端，但无论怎样称呼，其本质都是特指Web产品。根据目前个人电脑屏幕逐渐变大的趋势来看，Web产品界面设计的宽度也逐渐变宽，网页设计出现了固定宽度网页设计和宽屏响应式网页设计。

### 一、网页设计尺寸

#### 1.1 画布尺寸

PC端设备系统包括Mac的OS系统和Windows系统，但是不管是什么系统的个人电脑，设计师在制作PC桌面端产品界面时，画布尺寸通常选择1440*900px。根据gs.statcounter网站数据表明：2019.2-2020.2，国内桌面端屏幕分辨率尺寸使用情况，排列前三的分别是1366*768、1920*1080、1440*900，为了更好的向上和向下适配，所以通常选择正好位于三者中间的尺寸1440*900作为通用响应式宽屏网页设计的画布尺寸，而sketch软件中已经内置好画布尺寸1440*1024。数据来源：http://gs.statcounter.com/

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/1ca06cd4-d1d1-4ae0-a446-b78cd3304adf20210122102841.png)</center>

<center>图：2019年2月～2020年2月全球桌面屏幕分辨率统计</center>

#### 1.2 界面尺寸

网页所依赖的载体是浏览器，由于大尺寸桌面显示器屏幕尺寸种类较多，而且用户可以自由控制浏览器的大小，调整窗口甚至改变系统(Windows)的默认分辨率，所以设计师需要思考网页在不同大小浏览器窗口下如何能更好地展示，保证网页的浏览体验。

通常，我们在制作网页之前会先确定网页的应用场景，是只在电脑上显示还是会在平板电脑pad或手机上显示。

如果，只是在个人电脑上展示，则可根据产品类型选择固定标准宽度或全屏响应式展示。设计师只需要设计一套网页，自定义固定标准宽度即可。在显示器分辨率为1920*1080下，一般网页固定宽度最小为900px，最大为1190px。

如果，网页的应用场景需要在多端展示，则会选择响应式界面设计，意味着我们要分别考虑个人电脑、平板、手机设备下网页的界面展示。响应式网页设计（Responsive web design, 简称RWD），指的是用一套代码实现网站在多终端设备浏览器窗口展示，终端包括手机端、平板电脑、个人电脑设备，且所有设备数据同步，无需单独维护某个终端网站数据，网站内容维护成本低。

#### 响应式界面设计有如下几个特点
根据不同终端设备需同时设计多套用户界面，则不同终端的界面布局不同，一般需同时设计手机端、平板电脑和PC端界面；
需要服务端检测设备分辨率，进而选择对应终端尺寸的界面；
在不同终端使用不同适配方案，在电脑端单位使用百分比、px，在手机端使用rem；
PC端网页域名以www.开头，手机端网页域名以m.开头；
网页布局需设置断点（断点是指页面宽度）；

根据下图Windows系统设备屏幕大小所示，由于 Windows 10 生态系统中的设备目标和屏幕大小差异很大，所以我们在做响应式网页设计时需要设计不同设备下的界面宽度（也称为 "断点"）。在针对特定断点进行设计时，需针对应用（应用的窗口）的屏幕可用空间大小（而不是屏幕大小）进行设计。 当应用全屏运行时，应用窗口的大小与屏幕的大小相同，但当应用不是全屏运行时，窗口的大小会小于屏幕的大小。一般网页断点数值是640px、1008px，在针对不同设备屏幕大小设计不同的界面布局。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/afcb0783-8c40-4a0d-9332-9ad705e56b5a20210122103101.png)</center>

<center>图：Windows不同设备大小和断点</center>

### 二、网页首屏线高度
Windows系统，显示器在1024*768分辨率下，浏览器chrome头部高度：70px，IE10为80px，firefox头部高度为100px，任务栏高度为50px，其中chrome、IE浏览器占比最大，所以网页首屏可视高度至少为600px（Chrome：648px，IE：638px，firefox：608px）。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/623aebd0-7040-4bae-8e0c-52d4e543e9e720210122103401.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a245246d-d279-4d0f-85ab-0ad21a22ecca20210122103436.png)</center>