Question

我正在尝试为桌面设备，平板电脑和移动设备制作一个快速响应的网站，但我遇到了一些麻烦。我创建了一个名为responsive-Ipad.css的文档，该文档仅适用于Ipads（我将最小宽度设置为600px）但不知何故css文件正在影响任何设备（平板电脑，移动设备或桌面设备）中的屏幕内容。我还有2个其他的css文件。

style.css
responsive.css为Ipads设置移动布局和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 */
}

Answer 2

检查您的CSS页面中是否正确包含了HTML（文件路径应该正确）文件。对于自适应网页，您需要将以下meta标记包含在HTML页面中。在包含CSS文件之前。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

如果您在HTML页面中加入这些内容，那就更好了。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Answer 3

/*
CSS for your media query
*/

@media (max-width:420px){
  
  /*your css for devices that are below 420px*/
}

@media (min-width:600px){
  
  /*your css for devices that are above 600px*/
}

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive.css">
  <link rel="stylesheet" href="css/responsive-ipad.css">
  </head>
  
  
  <body>
  <!--HTML Content-->
  </body>
  </html>

确保将所有 css 文件包含在 HTML 文件中。

希望这有帮助。

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

3 个答案: