[英]Change margin, width, height, top, left, padding from all elements between a div
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 谢谢您的帮助
CSS Media Queries are what you need to use - eg CSS Media Queries是您需要使用的-例如
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.