css媒体景观和肖像

Question

为什么我在下面添加css媒体，并且在两个配置的nexus 5上像素效果不相同。它似乎有三分之二。 （肖像中60px的大小似乎是风景中的40px）。

我应该知道什么概念？ （我真的很困惑）

@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/后，它正在运行。

但我不知道这个概念。

Answer 1

我认为您可能会将元视口标记语法与@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;
  }
}

Answer 2

可能是因为像素密度差异。请看一下Mozila的这篇文章，以便更好地了解移动设备上的视口和像素。

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

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