根据屏幕分辨率通过javascript加载css答案

【问题标题】：load css via javascript according to screen resolution根据屏幕分辨率通过javascript加载css
【发布时间】：2017-01-12 17:08:30
【问题描述】：

声明：让我的网站具有响应性。

到目前为止我所做的：我尝试使用@media 查询，根据分辨率制作外部 css 页面。

问题：我制作了 5 个样式表； 1024.css、1280.css、1366.css、1440.css、1920.css。除了 1024.css 之外，一切似乎都运行良好！当我以 1024 分辨率加载网站时，它会自动转到移动类型的网站。导航变成一个按钮，所有元素都错位了。

我在寻找什么？：我想通过 javascript 加载 css 样式表。例如；我希望能够在屏幕分辨率为 1024px 时加载 1280.css 。

我是 js 的初学者。所以我不能做高级功能。

但到目前为止我已经准备好了这个算法：

If (max-width = 1024px){replace style.css with 1280.css}

If (max-width = 1366px){replace style.css with 1366.css}

If (max-width = 1440px){replace style.css with 1440.css}

If (max-width = 1920px){replace style.css with 1920.css}

Else if (max-width = 1280px){replace style.css with 1280.css}

PS：我搜索了 Google 和 Stackoverflow，但一无所获。

更新：我尝试了您所说的 Abhishek Pandey，但结果如下。你可以在http://shalepizza.tk/上查看我目前在索引页面上工作。

要检查适当的分辨率，在页面加载时，按 F12 和 Ctrl+Shift+M

我这样链接我的 CSS：<link href="/static/1024.css" rel="stylesheet" type="text/css" />

【问题讨论】：

您当前的方法是正确的。你最好找出它为什么没有按预期工作。
为什么使用 js - 为什么不使用媒体查询？当您说您已经尝试过时，目前还不清楚出了什么问题
试试这个css-tricks.com/resolution-specific-stylesheets
您可以加载所有的 CSS，然后媒体查询就可以完成这项工作。在 js 中加载主 css 通常不是一种有效的方式（不一致的延迟，..）
我建议你分享代码中不起作用的相关部分（你如何包含你的 CSS，可能是 CSS 本身和结果页面的链接），也许我们可以帮助修复他们。但无论如何，你应该说明你在问什么。

标签： javascript html css responsive-design responsive

【解决方案1】：

<body  onresize="myFunction()">
function myFunction() {
            var width = window.outerWidth;
            if (width < 960){
                $('link[href="style1.css"]').attr('href','style2.css');
            }else{
                $('link[href="style2.css"]').attr('href','style1.css');
            }
        }

【讨论】：

【解决方案2】：

请问您为什么要为此使用 Javascript？ HTML 有一个叫做Media Queries（规则：@media）的东西，你可以通过它指定它需要以特定大小运行的 CSS。

媒体查询以@media 开头。要告诉有关屏幕端口的代码，请使用screen。以and (min-width:1024px){ 结束并在此处输入您的 CSS。

例如。这是你的 style.css；

@media screen and (min-width:1024px){
  background-color:#0f0f1f;
}

@media screen and (min-width:2411px){
  background-color:000000;
}

不要像这样包含其他 css 文件。当你想这样做时，你可以在你的 CSS 包含中提供 Media 属性。

 media="screen and (min-width:1024px)"

【讨论】：

【解决方案3】：

您可以使用html 代替js

<link href="/static/1024.css" media="screen and (max-width:1024px)" rel="stylesheet"  type="text/css" />
<link href="/static/1366.css" media="screen and (max-width:1366px)" rel="stylesheet" type="text/css" />

或者最好的选择是在 css 文件中使用 @media 查询

/* min size style*/
@media screen and (max-width:320px) {
   /* put your css style in there */
}

/* middle size style */
@media screen and (min-width:321px) {
   /* put your css style in there */
}

/* large size style */
@media screen and (min-width:800px) {
   /* put your css style in there */
}

【讨论】：