所有屏幕尺寸的媒体查询

Question

从大型桌面屏幕到小型移动设备：我们应该使用哪些媒体查询？

我对此有点困惑。我正在努力弄清楚这一点

/*Small Desktop*/

@media (max-width:1920px){

}

Answer 1

@media 查询仅在设备的屏幕满足某些定义的标准（高度、宽度和像素比；主要是）时应用标准 CSS

我为媒体查询找到的最佳资源是https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

这是那里出色作品的快照：

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}