화면 크기에 따라 스타일 시트를 jQuery로 바꿈

Question

안녕하세요 누구든지 도움이 될지 궁금합니다. jQuery를 사용하여 반응 형 사이트를 만들려고합니다. 대상 잠재 고객이 IE7/8 및 css3-mediaqueries에 있으므로이 방법을 사용해야합니다. .js는 jQuery UI에 방해가되는 것 같습니다.) 다음 스크립트를 사용하여 너비와 높이를 감지하고 이에 따라 스타일을 적용합니다. 너비가 크지 만 높이가 아니라면 SMstyle.css이 style.css으로 덮어 씁니다. 나는 자바 스크립트를 배우려고 노력하고 있지만, 순간에 강하지는 않다. 나는 더 쉬운 방법이 있다는 것을 안다! 어떤 도움을 ...

function adjustStyle(width, height) { 
    width = parseInt(width); 
    height = parseInt(height); 
     if (((width >= 701) && (width < 1200)) || (height < 800)) 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     else 
      $("#size-stylesheet").attr("href", "css/style.css"); 
} 

$(function() { 
    adjustStyle($(this).width(), $(this).height()); 
    $(window).resize(function() { 
     adjustStyle($(this).width(), $(this).height()); 
    }); 
}); 

Answer 1

반응 레이아웃을 처리, 당신은 정말 높이에 대해 걱정하지 않는다 (안된)

function adjustStyle(width) { 
     width = parseInt(width); 
     if ((width >= 701) && (width < 1200 
     )) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).width()); 
     $(window).resize(function() { 
      adjustStyle($(this).width()); 
     }); 
    }); 

    function adjustStyle(height) { 
     height = parseInt(height); 
     if (height < 800 
     ) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).height()); 
     $(window).resize(function() { 
      adjustStyle($(this).height()); 
     }); 

    }); 

Answer 2

리팩토링을 감상 할 수있다. 전체 컨셉은 컨텐츠가 너비에 맞지 않으면 축소되어 (따라서 높이가 증가한다는 것입니다.)

편집 : 나는 당신이 $의 범위에 있기 때문에, 대신 $ (이)의 $ (문서)를 사용할 필요가 생각

수동으로 실행할 때이에 의해 실행되는 경우 (이) 다를 수 있습니다 resize 이벤트.

function adjustStyle() { 
    var width = $(document).width(); 
    var height = $(document).height(); 
    if (((width >= 701) && (width < 1200)) || (height < 800)) { 
     $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
    } else { 
     $("#size-stylesheet").attr("href", "css/style.css"); 
    } 
} 

adjustStyle(); 
$(window).resize(function() { 
    adjustStyle(); 
}); 

가 다른 범위를 참조하려면 다음을 수행하십시오

$(function() { 
    console.log('Scope', $(this)); // Scope is DOM-element 
    $(window).resize(function() { 
     console.log('Scope', $(this)); // Scope is Window object. 
    }); 
});