화면 해상도에 따라 자바 스크립트를 통해 CSS를로드

성명 : 내 웹 사이트 응답 성.화면 해상도에 따라 자바 스크립트를 통해 CSS를로드

내가 한 일은 : 해상도에 따라 외부 CSS 페이지를 만드는 @media 쿼리를 사용해 보았습니다.

문제점 : 5 개의 스타일 시트를 만들었습니다. 1024.css, 1280.css, 1366.css, 1440.css, 1920.css. 1024.css를 제외하고 모두 제대로 작동하는 것 같습니다! 1024 해상도로 웹 사이트를로드하면 자동으로 모바일 유형 사이트로 바뀝니다. 탐색이 버튼으로 바뀌면 모든 요소가 어긋납니다.

내가 찾고있는 바 :? javascript를 통해 CSS 스타일 시트를로드하고 싶습니다. 예 : 화면의 해상도가 1024px 일 때 1280.css를로드 할 수 있어야합니다.

저는 초급자입니다. 그래서 나는 고급 기능을 만들 수 없습니다.

는 그러나 지금까지 나는이 알고리즘을 준비했습니다 :

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를 : 나는 구글과 유래를 검색 아무것도 발견했습니다.

업데이트 : 당신이 Abhishek Pandey라고 말한 것을 시도했지만 결과는 여기에 있습니다. 당신은 그것을 확인할 수 있습니다 http://shalepizza.tk/ 현재 색인 페이지에서 작업 중입니다.

내가 이렇게 내 CSS를 링크 해당 페이지가로드 해상도, F12 키를 눌러 및 Ctrl 키 + 시프트 + M

를 확인하려면 : <link href="/static/1024.css" rel="stylesheet" type="text/css" />이

출처

2016-09-05 Abbas Akhtar

현재 접근 방식은 올바른 것입니다. 예상대로 작동하지 않는 이유를 찾는 것이 좋습니다. – Archer

js를 사용하는 이유 - 미디어 쿼리를 사용하지 않는 이유는 무엇입니까? 시도한 바가 무엇이 잘못되었는지 확실하지 않습니다. – Pete

시도해보십시오. https://css-tricks.com/resolution-specific-stylesheets/ – user2584538

당신은 대신 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 */ 
}

출처

2016-09-05 10:38:44

왜 자바 스크립트를 사용하고 싶은지 물어볼 수 있습니까? HTML Media Queries (규칙 : @media)이라는 코드가 있으며 특정 크기로 실행해야하는 CSS를 지정할 수 있습니다.

A 미디어 쿼리는 @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)"

출처

2016-09-05 11:08:57

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

출처

2016-09-05 11:39:02

화면 해상도에 따라 자바 스크립트를 통해 CSS를로드

답변

관련 문제