Html 所有设备的媒体查询

除了为所有设备设置不同的媒体查询外，有没有更简单的方法可以让我的网站在不同的移动设备上看起来更好？

你能按宽度来做吗

@media screen and (max-width: 480px) {
    // CSS Here
}

---

您通常使用很少的媒体查询：1200、992、768甚至480。如果你希望你的网站能够完全响应，那么这并不多。或者，您可以学习并使用Bootstrap，这有助于提高响应能力

您可以使用媒体查询使网站响应，但您必须适应各种屏幕，如ipad

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

}

/* ----------- iPad 1 and 2 ----------- */
/* 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) {

}

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

}

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

}

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

}

同样，你也可以寻找其他设备，如笔记本电脑、平板电脑、迷你手机等。这里有一篇文章给出了媒体屏幕的所有屏幕尺寸。在这里重写这一切是没有意义的

---

除了媒体查询，您还可以使用bootstrap之类的框架，这样可以减少使用媒体查询的麻烦。您只需使用具有预定义css的类。

设备宽度

和

设备高度

。[@IgnatOspadov您的链接不存在格式错误。该链接的格式错误。相同的链接没有格式错误：