Javascript 在不影响正常屏幕大小的情况下调用屏幕大小的样式表

我已经在这里浏览了很多帖子/问题，但找不到我想要的东西

基本上，我已经做了一个正常的网站（内容放在一个960像素的块内，因此它完全适合iPad等），这是伟大的，但我现在需要一个样式表来使用，如果屏幕大小小于480像素（移动设备）

我遇到的问题似乎是元视口等，因此我尝试了几种不同的方法，例如在标题中设置“

”并设置“

”，它可以工作，但它会破坏iPad和其他移动设备上的网站，这些设备的宽度大于480px。如果我移除视口，它在iPad等上也可以正常工作，但无法通过移动css

---

有什么想法吗？

只需在下一个笔划中添加到css文件：

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

---

有两种选择

我会选择沃伦·格里姆斯金（Warren Grimskin）专业回答的媒体提问

@media screen and (max-width: 480px) {
.head{
    color: #000000;
}

}

或者，您可以链接到html文件头部分中的单独文件，如下所示：

<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="mobilestyle.css">

后一个css文件中的样式将覆盖前一个css文件中的样式

此外，视口元应如下所示：

<meta name="viewport" content="initial-scale=1" />

谢谢你，沃伦。我最初尝试过这个方法，但它不起作用，除非我在头部使用了viewport meta，然后破坏了iPad上的站点。有什么想法吗？我可以假设你的视口设置不正确，你能展示一个视口代码的示例吗？好的，如果我正确理解你的问题，你不希望它在iPad上缩放，因此，试着像下面有

的视口那样使用视口。它在移动样式表中仍然有效，但在我的iPad上，肖像版的屏幕从右手边像三分之一一样被切断。如果没有视口，它非常适合，但无法通过移动css哈哈。