Change margin, width, height, top, left, padding from all elements between a div

Question

I got a design in Full HD resolution, it was planned for a presentation in this solution, now they want that it will be a bit responsive. Now I have to change all these parameters: margin, padding, width, height, top, left on the fly, maybe someone got a solution for me.

I tried following and it works for the images with the width and height:

// Set Array for Resize (0 => width of the window, 1 => resize (yes / no)?, 2 => how much per cent do I have to put away
var resize_pool = new Array(parseInt($(window).width()), false, 0);
if(resize_pool[0] < 1920) {
    resize_pool[1] = true;
    resize_pool[2] = (100 * resize_pool[0]) / 1920;
    resize_pool[2] = 100 - Math.floor(resize_pool[2]);
}
// Do I have to resize?
if(resize_pool[1] == true) {
    $("#content img").each(function(index, element) {
        $(this).css('width', 'calc(' + $(this).width() + 'px - ' + resize_pool[2] + '%)').css('height', 'calc(' + $(this).height() + 'px - ' + resize_pool[2] + '%)');
    });
}

This works fine, but is there a better solution, where I can change all my values? margin, padding etc.

Thanks for your help in advance

Answer 1

CSS Media Queries are what you need to use - eg

td {
  padding:20px; /* Default padding size for 1920px+ wide */
}

@media screen and (max-width: 1919px) {

  td {
    padding:10px; /* Smaller padding for screens less than 1920px wide;
  }

}