Question

我已经设置了这些媒体查询。但是如何编辑它以便为肖像，横向版本（例如：iPad，iPhone）设置单独的媒体查询？

＆＃xA;＆＃xA;

  @media only screen and（ min-width：1824px）{}＆＃xA;＆＃xA; @media only screen and（min-width：1200px）and（max-width：1823px）{}＆＃xA;＆＃xA; @media only screen和（最小宽度：992px）和（最大宽度：1199px）{}＆＃xA;＆＃xA;仅@media屏幕和（最小宽度：768px）和（最大宽度：991px）{}＆＃ xA;＆＃xA; @media only screen和（max-width：767px）{}＆＃xA;＆＃xA; @media only screen and（max-width：480px）{}＆＃xA;

＆＃XA;

Answer 1

@media only screen and ( orientation: portrait ) {}

@media only screen and ( orientation: landscape) {}

我认为那就是你要找的东西。

编辑：

我认为适合我的css 你的意思是：

@media (max-width: whatever) and (orientation: landscape) {}

如果您要求建议何时使用portrait或landscape，请在视口宽度较大时使用landscape，反之亦然。

max-width: 1024px将设置一个上限，它不会干扰范围规则：1200px-1823px。

Answer 2

我们必须将orientation: portrait和orientation: landscape添加到您的媒体屏幕。

iPad横向和纵向

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

/* ur CSS */
}

/* iPad 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，请使用像素比率：2（Retina显示屏）。

-webkit-min-device-pixel-ratio: 2

对于iPhone来说，对于iPhone来说，你必须为4个不同的屏幕设置媒体，＆lt; iPhone 4S，iPhone 5S和iPhone 6和6 plus版本。

区分媒体查询中的纵向和横向版本

2 个答案: