Question

我正在努力使网站对iPhone 7做出响应。问题是我的媒体查询在不应该的时候正在运行;对于iPhone 7，我使用的是max-width: 320px，但他的真实分辨率为 375px （至少在https://mydevice.io/devices/中显示），为什么我的媒体查询适用？ 375px大于320px

/* iPhone 7 */
@media screen and (max-width: 320px) { 
.qr_popup {
  left: 50%;
  top: 200px;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 10px;
  background: #ededed;
  width: 85%;
  position: relative;
  box-shadow: 0px 0px 3px white;}}

/* Galaxy */
@media screen and (min-width: 360px) {
.qr_popup {
  left: 50%;
  top: 250px;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 10px;
  background: #ededed;
  width: 85%;
  position: relative;
  box-shadow: 0px 0px 3px white;}}

不同之处在于 top：250px;

Answer 1

您的第二个媒体查询将应用于至少 360px宽的任何视口，您所声明的iPhone 7为375px。

360px 小于 375px，因此应用了第二个媒体查询。

FWIW我不会针对特定设备（除非您迫切需要）。我从小处开始添加断点，因为你的内容和布局决定了视口的扩大。

我的最大宽度媒体查询应用时不应该

1 个答案: