Question

我获得了全高清分辨率的设计，计划在此解决方案中进行演示，现在他们希望它会有点响应。现在我必须改变所有这些参数：边距，填充，宽度，高度，顶部，左边的动态，也许有人为我找到了解决方案。

我试过以下，它适用于宽度和高度的图像：

// 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] + '%)');
    });
}

这很好，但有更好的解决方案，我可以改变我的所有价值观吗？保证金，填充等。

感谢您的提前帮助

Answer 1

CSS媒体查询是您需要使用的 - 例如

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

}

更改div之间所有元素的边距，宽度，高度，顶部，左边，填充

1 个答案: