根據屏幕分辨率通過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 */
}

Answer 2

請問您為什么要使用Javascript？ HTML具有稱為Media Queries （規則： @media ）的內容，您可以使用它指定以特定大小運行它所需的CSS。

媒體查詢以@media開頭。 要告訴您有關Screen Port的代碼，請使用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');
            }
        }

根據屏幕分辨率通過javascript加載CSS

問題描述

3 個解決方案

解決方案1
4 2016-09-05 10:38:44

解決方案2
0 2016-09-05 11:08:57

解決方案3
0 2016-09-05 11:39:02

根據屏幕分辨率通過javascript加載CSS

問題描述

3 個解決方案

解決方案1 4 2016-09-05 10:38:44

解決方案2 0 2016-09-05 11:08:57

解決方案3 0 2016-09-05 11:39:02

解決方案1
4 2016-09-05 10:38:44

解決方案2
0 2016-09-05 11:08:57

解決方案3
0 2016-09-05 11:39:02