首先，你使用它的方式，不会很好地工作。例如：

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* for laptops */

如果屏幕的宽度为900px，则两个媒体查询都适用。因为900px低于1200px，也低于991px。对于该特定情况，您的媒体查询应如下所示：

/* for desktops */
@media only screen 
  and (min-width: 1367px) { 
    ...
}

/* for laptops */
@media only screen 
  and (min-width: 991px) 
  and (max-width: 1366px) { 
    ...
} 

/* for large tablets */
@media only screen 
  and (min-width: 769px) 
  and (max-width: 990px) { 
    ...
} 

/* for smaller tablets */
@media only screen 
  and (min-width: 481px) 
  and (max-width: 768px) { 
    ... 
} 

/* for cellphones */
@media only screen 
  and (max-width: 480px) { 
    ...
}

正如你所注意到的，它应该包含最小和最大宽度，除非它的lwoer或顶端（桌面和智能手机）最小的智能手机大小是320px btw.此外，我改变了媒体查询，以屏幕只，这只是一个很好的做法，因为你想解决屏幕只.
屏幕尺寸：请注意硬件像素和视口像素之间的区别。你的手机可能有超过900个硬件像素，但只有一半或四分之一是视口像素。硬件像素是设备物理上拥有的像素，视口像素是可以被css修饰的像素。原因是，硬件像素实际上不是可寻址的，是为了清晰度。此外，它可能是几乎不可读的。
编辑：便宜的笔记本电脑屏幕面板的分辨率为1366 x 768px。所以笔记本电脑的宽度也应该设置为1366px。

设备像素和CSS像素是有区别的。在许多屏幕上，它们被同等对待，但在高DPI屏幕上，每个CSS像素可以有几个设备像素。See this page on MDN用于更多阅读。
要控制CSS像素宽度，请在HTML中使用viewport meta标记。此标记通常仅在移动的设备上解释，因此不会影响桌面浏览器上的站点。它指定站点显示的 * 最小 * 宽度。
例如，要将您的网站设置为在移动的上显示的最小宽度为500px，请用途：

<meta name="viewport" content="width=500, initial-scale=1">

要以浏览器的宽度显示站点，请用途：

<meta name="viewport" content="width=device-width">

除了MDN文章之外，the following article可能有助于设置平板电脑的显示宽度。

对于响应式设计，建议使用移动的优先”方法。首先设计移动版本的样式，然后随着视口的增长进行更改。
对于以下介质查询，您会遇到不同的问题：

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } 
@media (max-width: 500px) { ... }

正确做法应该是

// you start with mobile version
@media (min-width: 500px) { ... } // will match only screen width >= 500px
@media (max-width: 768px) { ... } // will match only screen width <= 768px
@media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and <= 990px (could be tablets also)
@media (min-width: 991px) { ... } // match also ipad on landscape mode
@media (min-width: 1200px) { ... } /* for desktops */