不同大小的浏览器的不同样式表 Windows

Question

我看到这个问题四处飘荡，也看到了很多好的答案，但有些对我不起作用，因为它们没有达到我真正想要的，而我发现的那个确实可以，只是由于 hopefully-soon-to-be-discovered 原因无法正常工作。

所以，

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

general（无论尺寸如何都不会改变的通用样式）
手机
Tablet-small 计算机
更大的计算机

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

<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>

Answer 1

有些设备对您的页面应用了缩放，因此感知到的宽度比实际宽度大。尝试将此添加到文档的头部：

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

Answer 2

你试过了吗：

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

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

Answer 3

如何从 link 标记中删除条件并在一种样式中使用内联检查 sheet 例如

/* 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 标签的情况下尝试，看看会发生什么，:) 希望您能通过

不同大小的浏览器的不同样式表 Windows

Different Stylesheets for Differently Sized Browser Windows

css

responsive-design