html - iPad Portrait 的响应式网页设计和媒体查询在调整窗口大小时不显示任何变化

Question

我希望为我的 iPad 纵向网站添加一些响应式网页设计。我有我的主 css 文件 (style.css)，然后添加了以下行:

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />

但是，当我尝试将 div 的背景颜色设置为红色或其他颜色然后调整窗口大小时，当它达到 iPad 纵向大小时我看不到任何变化。

我链接到的样式表如下所示:

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

.myTile{background:red;}

}

我已经尝试过使用和不使用它，并且在调整大小时没有任何区别。

我做错了什么？

任何帮助都会很棒，我只是选择响应式设计。

谢谢

Answer 1

我会使用:

@media screen and (max-width: 768px) {
  /*styles*/
}

我也使用 max-width。 max-width 和 max-device-width 有什么区别？不同之处在于，max-device-width 仅影响最大宽度为 XYZpx 的设备，因此在桌面上重新调整浏览器窗口的大小不会产生与该特定媒体查询相关的样式更改。 max-width，将在适合媒体查询的任何设备/浏览器上产生样式更改。因此，重新调整桌面浏览器的大小并让媒体查询使用最大宽度，您会像使用 iPad 的人一样看到网站。

这是一个很好的引用:Responsive Web Design