javascript - 在不影响正常屏幕尺寸的情况下为屏幕尺寸调用样式表

Question

我在这里查看了很多线程/问题，但找不到我要找的东西。

基本上我已经完成了一个普通的网站(内容位于 960px block 内，因此它完全适合 iPad 等)这很好，但如果屏幕尺寸小于 480px(移动设备)，我现在需要一个样式表设备)。

我遇到的问题似乎与元视口(viewport)等有关，所以我尝试了几种不同的方法，例如在标题中设置了“<link rel="stylesheet" href="/templates/dervans/css/mobile.css" media="screen and (max-device-width: 480px)" />”的“<meta name='viewport' content='width=device-width, initial-scale=1'>”，它可以工作，但它会中断iPad 和其他宽度大于 480 像素的移动设备上的网站。如果我删除视口(viewport)，它在 iPad 等上再次正常工作，但不会通过移动 css。

有什么想法吗？

Answer 1

只需将下一笔添加到您的 css 文件中:

@media screen and (max-width: 480px) {
    class or id{
        background-color: lightblue;
    }
}