Question

我已经看到这个问题浮出水面，并且已经看到很多好的答案，但有些人不能为我工作，因为他们没有实现我真正想要的东西，而是我所做的那个。我们发现这样做，并没有为一个希望很快被发现的原因而努力。

所以，

正如标题所示，我想为不同的浏览器尺寸加载不同的样式表。目标是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加载一张，{{ 1}}工作正常，介于两者之间没有样式，当我得到480px以下时，仍然没有任何样式。

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

HEAD SECTION

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

Answer 1

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

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

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

Answer 3

你有没有尝试过：

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

查看本教程https://www.youtube.com/watch?v=aPtA4nYkvDw

用于不同大小的浏览器窗口的不同样式表

3 个答案: