Question

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

Answer 1

您可以使用媒体查询来使网站响应，但您必须调整各种屏幕，例如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) {

}

同样，您可以查找笔记本电脑，平板电脑，迷你电话等其他设备。这篇文章给出了媒体屏幕https://css-tricks.com/snippets/css/media-queries-for-standard-devices/的所有屏幕大小。在这里重写一遍都没有意义。

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

Answer 2

你可以按宽度来做吗？

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

Answer 3

您通常使用少量媒体查询：1200,992,768和480.如果您希望您的网站完全响应，那就不是那么多了。或者，您可以学习和使用Bootstrap，它可以帮助您提供快速响应。

媒体查询所有设备

3 个答案: