html - 为什么我的 CSS 媒体查询不起作用？

Question

我正在尝试为台式机、平板电脑和移动设备制作响应式网站，但我遇到了一些麻烦。我创建了一个名为 responsive-Ipad.css 的文档，它只能在 Ipad 中使用(我将最小宽度设置为 600px)，但是 css 文件以某种方式影响了任何设备(平板电脑、手机)的屏幕内容或桌面)。我还有另外 2 个 css 文件。

1. style.css 我用来设置桌面布局，
2. responsive.css 为 Ipad 设置移动布局和 responsive-Ipad.css。

style.css 没有媒体查询 responsive.css 以这行代码开头:

@media only screen and (max-width:420px){

响应式 Ipad 以这行代码开头:

@media only screen and (min-width: 600px){

有人知道如何解决这个问题吗？

Image that represents the problem

Answer 1

尝试使用这些媒体查询并添加这个元标记

<meta name="viewport" content="width=device-width" />

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}