I'm studying something in jQuery for the case.
Is it possible to change an image according to the screen resolution?
For example: in the browser itself, with it without minimizing is the large image. If minimized, the function switches to the small image.
Yes, it is possible! You can do this using the method .width()
Description: The
.width()gets the current width calculated for the first element in the set of corresponding elements pointed to.
In this case, the corresponding element will be window , to get the width of the window viewport :
$(window).width()
Next we will calculate whether the width of the viewport is greater than a value that we want to determine, for example:
if ($(window).width() > 500) {
alert('A largura da janela é menor que 500');
} else {
alert('A largura da janela é maior que 500');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>Here'sa example in jsFiddle to see this code in action. Drag the edges of the results section by decreasing or increasing the size of the window to see the image change.
You can place a call to your role within $(window).resize(function() { ... }); .
I suggest using document.body.scrollWidth instead of $(window).width() because the first one takes the width from inside the screen by discounting the scroll bar, browser border, etc.