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：我已经搜索过谷歌和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 */
}

Answer 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 include中提供Media属性。

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

Answer 3

<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');
            }
        }

根据屏幕分辨率

3 个答案: