Question

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

在一个范围内（@media screen and (min-width: 600px) and (max-width: 960px)）我想要改变图片的百分比宽度属性。

具体来说，在960，我希望它实际上是width: 50%，但是在600，我希望它实际上是width: 38.1966%。对于宽度减小的每个像素，我需要的宽度减少0.032787％。

到目前为止，我发现没办法让calc()来处理这个问题。

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

甚至可能吗？

Answer 1

如果你想使用jQuery：

如果您提到的css中的计算值，则可以使用var itemWidth = $('#id').innerWidth();获取。然后，您可以使用var bodyWidth = $('body').innerWidth();

获取页面的宽度

因此，您可以编写一个使用bodyWidth和itemWidth来计算百分比var percentVar= itemWidth / bodyWidth * 100;的脚本，并使用它来设置项$("#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 link

Answer 2

纯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)

获取CSS calc百分比结果

2 个答案: