Как определить размер окна с помощью jquery

Question

Я хотел бы проверить размер окна с помощью jquery и на основе различных разрешений, которые я хотел бы изменить с помощью css. Это основная структура:

$(document).ready(function(){ 

function checkWidth() { 
    var windowSize = $(window).width(); 

    if (windowSize > 600) { 
    console.log('600px - 768px'); 

    } else if (windowSize > 450) { 
    console.log('450px - 600px'); 

    } else if (windowSize > 300) { 
    console.log('300px -450px'); 
    } 

} 

// Execute on load 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

}); 

Проблема заключается в том, что я хочу три состояния с windowSize (300px-450px, 450px-600px, 600px-768px). Я не знаю с условием.

Answer 1

Попробуйте с этим

function checkWidth() { 
     var windowSize = $(window).width(); 

     if (windowSize > 600 && windowSize <= 768) { 
     console.log('600px - 768px'); 

     } else if (windowSize > 450 && windowSize <= 600) { 
     console.log('450px - 600px'); 

     } else if (windowSize > 300 && windowSize <= 450) { 
     console.log('300px -450px'); 
     } 
} 

Answer 2

Почему вы не используете только мультимедийные запросы CSS?

@media (min-width: 300px) and (max-width: 449px) { 
    /* your css properties */ 
} 
@media(min-width: 300px) and (max-width: 599px) { 
    /* your css properties */ 
} 
@media(min-width: 300px) and (max-width: 768px) { 
    /* your css properties */ 
} 

Answer 3

С ниже кодом, на основе различных условий добавить свой материал.

$(function() { 
    var windowWidth = $(window).width();  
    if(windowWidth == 300 || windowWidth == 450) { 
     // add stuff 
    } 
    else if(windowWidth == 450 || windowWidth == 600) { 
     // add stuff 
    } 
    else if(windowWidth == 600 || windowWidth == 768) { 
     // add stuff 
    }  
}) 

Answer 4

Вы можете сделать, как:

checkSize(); 
 

 
function checkSize(){ 
 
var windowWidth = $(window).width(); 
 

 
if (windowWidth >= 600 && windowWidth <= 768) { 
 
     console.log('600px to 768px'); 
 

 
     } else if (windowWidth >= 450 && windowWidth <= 600) { 
 
     console.log('450px to 600px'); 
 

 
     } else if (windowWidth >= 300 && windowWidth <= 450) { 
 
      console.log('300px to 450px'); 
 
     } 
 
} 
 
     
 
$(window).resize(function() { 
 
    checkSize(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Fiddle. Проверить