0

我正在尝试派生一些响应式 CSS，可以优雅地调整图像元素的大小。

在一个范围内 ( @media screen and (min-width: 600px) and (max-width: 960px)) 我希望我的图像的百分比宽度属性发生变化。

具体来说，在 960 时，我希望它有效地成为width: 50%，但在 600 时，我希望它有效地成为width: 38.1966%。对于宽度减少的每个像素，我需要的宽度减少 0.032787%。

到目前为止，我还没有找到解决calc()这个问题的方法。

我实际上需要首先执行一个基本计算：(960px - 100vw). 不幸的是，这会以像素为单位给出结果，而我需要将其转换为一个数字，我可以乘以我的目标百分比方差。

甚至可能吗？

4

2 回答 2

0

如果你想使用 jQuery：

一旦你像你提到的那样在 css 中计算出值，你就可以用var itemWidth = $('#id').innerWidth();. 然后，你可以得到页面的宽度var bodyWidth = $('body').innerWidth();

因此，您可以编写一个脚本，使用bodyWidth和itemWidth来计算百分比var percentVar= itemWidth / bodyWidth * 100;并使用它来设置 item 的宽度$("#id").css("width", percentVar);。

所以，jQuery 看起来会是这样的：

var main = function(){
    var itemWidth = $('#id').innerWidth();
    var bodyWidth = $('body').innerWidth();
    var percentVar= itemWidth / bodyWidth * 100;
    $("#id").css("width", percentVar);
}

$(document).ready(main)

或者，如果您想重用它，请创建一个函数并将其放入 main 函数中

var main = function(){
    element_sizer('#id');
    element_sizer('#id2');
}

$(document).ready(main)    

function element_sizer(id) {
    var itemWidth = $(id).innerWidth();
    var bodyWidth = $('body').innerWidth();
    var percentVar= itemWidth / bodyWidth * 100;
    $(id).css("width", percentVar);
}

注意：您可以使用width, innerWidth,outerWidth取决于您需要的链接

于 2014-10-17T12:42:47.490 回答
0

纯 CSS .. 这确实是一团糟，但它会起作用：

小提琴：http: //jsfiddle.net/r9xwL0rb/

CSS：

@media screen and (min-width: 600px) and (max-width: 960px){img{width: 50%;}}
@media screen and (min-width: 600px) and (max-width: 959px){img{width: 49.96721278%;}}
@media screen and (min-width: 600px) and (max-width: 958px){img{width: 49.93442556%;}}
@media screen and (min-width: 600px) and (max-width: 957px){img{width: 49.90163833%;}}
... etc (see fiddle for complete source)
于 2014-10-17T13:02:15.813 回答