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

Question

声明:使我的网站响应。

到目前为止我做了什么:我尝试使用@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" />

Answer 1

你可以使用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 */
}