所有屏幕尺寸的媒体查询

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) {

}