写响应式页面时，电脑、平板、手机等终端的尺寸界限分别是多少？

好多前端切图人员在编写响应式前端页面时，对各类终端的尺寸界面把握有点模糊，今天我们就来浅谈一下电脑、平板、手机等终端在做响应式页面时媒体查询的尺寸界限如何定义。

我们都知道，针对各终端的前端页面，有两种写法，一种是针对每个终端各写一套，另外一种就是响应式的前端页面，而写响应式页面的关键就是媒体查询，而媒体查询的要点又是尺寸界限的定义。当然，针对各终端写独立的页面，这些尺寸也是需要掌握的。

在bootstrap之前，前端江湖比较乱，对这类尺寸基本没有明确的限定，比如对于手机端，有人定义680px，也有人定义750px，算得上是百家齐鸣。但是自从bootstrap诞生以后，对这块的尺寸界限定义，大家基本都开始参照bootstarp的定义来定义了。

而bootstrap关于各终端尺寸的定义，在其每个版本中也都是在不断细化的。比如在bootstrap V4版本中，又增加了超小手机屏幕。一共五类终端尺寸，分别如下：

1、大屏桌面：≥1200px；2、一般桌面：≥992px；3、平板：≥768px；4、手机：≥576px；5、超小手机：≤576px；

可以说是非常详细了，但是一般在前端切图工作时，大部分情况下是不需要分这么详细的，除非是用户量特别大的项目，要不然只会增加代码量，实际意义不大。一般的项目，我们只需要每种终端考虑一种情况。即我们定义 ≥1200px（或者992px）的屏幕为电脑端，介于1200px（或者992px）和768px的屏幕，我们当做是平板，小于768px的话，则认为是手机端。

对应的媒体查询代码如下：

// 公共样式部分
@media screen and (min-width: 992px){
  // 电脑
}
@media screen and (max-width: 992px) and (min-width: 768px){
  // 平板
}
@media screen and (max-width: 768px){
  // 手机端
}

当然，在进行前端切图外包时，也需要根据客户的需求，进行适当的调整。比如，有一部分客户，只考虑手机端和平板端，不需要适配电脑端。

基本上三大主要终端的尺寸界限就如上所述，虽然不是明文规定的规范尺寸，但基本在前端切图行业内已成为事实标准，建议大家都采用统一的一套尺寸标准，使自己的代码更好维护，页面更加健壮。