Zastępowanie arkuszy stylów jQuery w zależności od rozmiaru ekranu

Question

Witam Zastanawiam się, czy ktoś może pomóc, staram się stworzyć responsywną stronę za pomocą jQuery (trzeba to zrobić w ten sposób, ponieważ docelowi odbiorcy są w IE7/8 i css3-mediaqueries .js wydaje się kolidować z interfejsem jQuery, którego używam również). Korzystam z poniższego skryptu, aby wykryć szerokość i wysokość i odpowiednio zastosować style, działa świetnie dla szerokości, ale nie dla wysokości, ładuje się wtedy SMstyle.css, a następnie nadpisuje stylem style.css. Próbuję się nauczyć JavaScriptu, ale w tej chwili nie jestem super silny, wiem, że jest łatwiejszy sposób! Każda pomoc będzie mile widziane ...

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 1

Gdy mamy do czynienia z reagujących układów, nie troszczą się o wysokość. Cała koncepcja polega na tym, że jeśli zawartość nie może pasować do szerokości, zwija się (a tym samym zwiększa wysokość).

EDIT:

wierzę, trzeba użyć $ (document) zamiast $ (this), ponieważ zakres $ (this) będzie inaczej, kiedy wywołać ją ręcznie i kiedy jest wywołany przez zdarzenie zmiany rozmiaru.

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

Aby zobaczyć różne zakresy, spróbuj tego:

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

Answer 2

refactored (niesprawdzone)

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