CSS媒体查询：横屏和竖屏

Question

CSS媒体查询：横屏和竖屏

htmlcss

4

我为什么要添加以下css媒体查询，而且在两个配置的nexus 5上像素效果不同，似乎只有三分之二。（60像素的大小在纵向模式下看起来像40像素的横向模式）。

我需要了解哪些概念？（我真的很困惑）

@media only screen and (max-device-width: 768px)and (orientation:portrait)

@media only screen and (max-device-width: 768px)and (orientation:landscape)

更新问题：

https://jsfiddle.net/Lgvpszrt/2/

图片中高度和文本大小不同。

//---------------------------

我把代码修复后，https://jsfiddle.net/Lgvpszrt/3/它可以工作。

但是我不知道这个概念是什么。

- Jacky

1

避免尝试为所有设备定义媒体查询。请参见Flexbox。 - Ronnie Royston

谢谢，我会学习Flexbox。 - Jacky

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- trungk18 · Answer 1

这可能是由于像素密度的差异。请参考Mozilla的这篇文章，以更好地了解移动端视口和像素。

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

- sheriffderek · Answer 2

我认为您可能正在结合meta-viewport标签语法和@media规则。尝试一下这个东西。https://jsfiddle.net/sheriffderek/rLnL27e4/

body {
  background: red;
}

@media (orientation: portrait) {
  body {
    background: orange;
  }
}

@media (orientation: landscape) {
  body {
    background: green;
  }
}

@media (min-width: 700px) and (orientation: portrait) {
  body {
    background: pink;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  body {
    background: lime;
  }
}