0

我希望为我的 iPad Portrait 网站添加一些响应式网页设计。我有我的主 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;}

}

我试过有没有这个，调整大小时没有区别。

我究竟做错了什么？

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

谢谢

4

1 回答 1

1

我会使用：

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

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

这是一个很好的参考：响应式网页设计

于 2013-12-28T16:55:56.983 回答