CSS3 媒体查询不起作用

发布于 2024-10-31 23:22:06 字数 727 浏览 1 评论 0原文

我最近一直在为网站开发移动版本，并且非常简单地希望能够在检测到浏览器位于移动设备上时更改 CSS 文件。您可以在此处查看我之前的尝试，但我现在决定完成此任务最可行的方法是专注于媒体查询。

我这里遇到的问题是媒体查询根本不起作用。它始终加载默认样式表。这是我的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

我是否错过了这段代码的某些内容？我尝试过使用为此提供的许多教程，但似乎没有一个对我有帮助。我真的在这里陷入了死胡同，所以任何帮助将不胜感激。

原文

I've recently been developing a mobile version for a website, and quite simply want to be able to change the CSS file if the browser is detected to be on a mobile device. You can view my previous attempts here, but I have now decided that the most feasible way of getting this done is to focus on Media Queries.

The problem I have here is that the media queries just don't work at all. It always loads the default stylesheet. Here is the code I have:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Have I missed something with this code? I've tried using the many tutorials offered for this but none seem to help me. I've really hit a dead end here so any help would be massively appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三月梨花 2024-11-07 23:22:06

默认样式表没有任何会阻止其加载的属性。

您可以给它 media="screen and (min-width: 481px)"，但这会导致危险，旧浏览器也不会加载它。

通常最好加载默认样式表，并确保移动样式表覆盖默认样式表中不需要的任何内容。

回复收藏 0 原文

梓梦 2024-11-07 23:22:06

在 iOS 上使用 min-device-width 完成条件对我来说很有效。请注意“设备”一词。然而，即使没有设备这个词，它在 Android 上也能正常工作。

回复收藏 0 原文

送舟行 2024-11-07 23:22:06

我在新闻网站中使用了 bootstrap，但它在 IE8 上不起作用，我使用了 css3-mediaqueries.js javascript 但仍然不起作用。如果您希望媒体查询使用此 javascript 文件，请在 css 中将屏幕添加到媒体查询行，

这里是一个示例：

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css 链接行与上面的行一样简单。

i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css

here is an example :

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css Link line as simple as above line.

回复收藏 0 原文