不同大小的浏览器窗口的不同样式表答案

【问题标题】：Different Stylesheets for Differently Sized Browser Windows不同大小的浏览器窗口的不同样式表
【发布时间】：2015-05-20 07:47:33
【问题描述】：

我已经看到了这个问题，并且看到了很多好的答案，但有些对我不起作用，因为它们没有达到我真正想要的，而我发现的答案只是' t 工作是为了一个希望很快被发现的原因。

所以，

正如标题所示，我想为不同的浏览器尺寸加载不同的样式表。目标是 4 个主要样式表。

一般（无论尺寸如何都不会改变的一般样式）
手机
平板电脑
更大的计算机

我目前的方法（以手机为例）是

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="style/mobile.css">

但这根本不适用于 safari 或 firefox（尚未测试其他浏览器）。我试图避免使用 jQuery，因为我想要一个纯 css 解决方案，并且不担心旧浏览器对这种情况的支持。我也尝试过使用max-width: 480px) 而不是max-device-width。我这里有什么遗漏吗？

编辑

另外，需要明确的是，它根本没有加载样式表。

编辑 2

我想补充一点，这适用于min-width 我目前有两张纸正在加载一张1024px+ 和一张< 480px，1024 工作正常，两者之间没有样式，当我低于 480px 时，仍然没有任何样式。

      <link rel="stylesheet" media="screen and (min-width: 1024px)" href="style/main.css">
      <link rel="stylesheet" media="screen and (max-width: 480px)" href="style/mobile.css">

所有样式以前只使用一个 css 文件，使用媒体查询来实现相同的目的。我现在的目标是打破这些，尤其是改善移动设备的加载时间。

头部部分

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen and (min-width: 1024px)" href="style/main.css">
    <link rel="stylesheet" media="screen and (max-width: 480px)" href="style/mobile.css">
    <link rel="stylesheet" href="style/typography.css">
  </head>

【问题讨论】：

它是根本没有加载，还是在大于设置的最大宽度的设备/屏幕上加载？
这是一个很好的问题，我应该将它添加到我的问题中。它根本没有加载。
它是否加载了 any 样式表，甚至是“通用”样式表？你能显示实际的完整文档head 吗？如果正在加载任何工作表，您正在测试什么设备/规格？实际上，您是在要求我们想象如果我们可以在某个假设的设备上看到问题，可能会发生什么。
@PaulRoub 看到第二次编辑，主样式表工作正常，移动端没有。另外，我目前正在我的浏览器上进行测试，通过在本地调整大小（和重新加载）。
您是否在具有高分辨率屏幕的设备上进行测试？ 对于打印机和超高分辨率屏幕，一个 CSS 像素意味着多个设备像素，因此每英寸的像素数保持在 96 左右。 developer.mozilla.org/en-US/docs/Web/CSS/length

标签： css responsive-design

【解决方案1】：

某些设备会对您的页面进行缩放，因此感知到的宽度比实际宽度大。尝试将其添加到文档的头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

谢谢，不过我已经有了。我即将添加我的整个头部，应该早点完成。

【解决方案2】：

例如，如何从链接标记中删除条件并在一个样式表中使用内联检查

/* common rule(s) */
/* some rules here */

/* Css for Tablets*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
  /* some rules here */
}

/* Css for Mini Tablets & Mobile */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   /* some rules here */
}

/* Css for Mobile */ 
@media only screen and (max-width: 479px) {
    /* some rules here */
}

我试过不带 !important 标记，但我认为你应该不带 !important 标记试试，看看会发生什么，:) 我希望你能通过

【讨论】：

【解决方案3】：

你试过了吗：

media="screen and (min-width: 0px) and (max-width: 480px)";

看这个教程https://www.youtube.com/watch?v=aPtA4nYkvDw

【讨论】：

这是一个不错的教程，我喜欢亚当的东西，不幸的是我不想依赖使用!important 标签，我想如果我使用min-width: 0 来制作移动样式，这将是必要的。
我明白你在说什么，我猜有人对你投了反对票，因为它读起来像别的东西。可能有助于将其更改为 min-width: 0 以澄清。有人必须实际观看教程才能得到答案。
您的评论让我走上了正确的道路，所以如果您可以将答案更改为media="screen and (min-width: 0px) and (max-width: 480px)"，我会接受。出于某种原因，它只有在我有min-width: 0px 和max-width 时才有效
由于某种原因，它只有在我有 min-width: 0px 和 max-width 时才有效 这太奇怪了。那是因为您的其他查询使用了最小宽度吗？
Idk，这是一个很好的问题@BSMP，我应该尝试删除它看看会发生什么。我以前从未遇到过这个问题。