获取CSS计算百分比结果

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

在一个范围内（

@媒体屏幕和（最小宽度：600px）和（最大宽度：960px）

），我希望图像的“百分比宽度”属性有所不同

具体来说，在960时，我希望它的有效宽度为

width:50%

，但在600时，我希望它的有效宽度为

width:38.1966%

。对于宽度减少的每个像素，我需要的宽度减少0.032787%

到目前为止，我还没有找到方法让

calc（）

来处理这个问题

我实际上需要首先执行一个基本的计算：

（960px-100vw）

。不幸的是，这给出了一个以像素为单位的结果，而我需要将它转换成一个数字，我可以乘以我的目标百分比方差

---

甚至可能吗？

如果您想使用jQuery：

一旦您在css中获得了您提到的计算值，您就可以使用

var itemWidth=$（'#id'）.innerWidth（）获得它。然后，您可以使用
var bodyWidth=$（'body'）.innerWidth（）获得页面的宽度

因此，您可以编写一个脚本，使用
bodyWidth
和
itemWidth
计算百分比
var percentVar=itemWidth/bodyWidth*100
并使用它设置项目的宽度
$（“#id”）.css（“宽度”，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)

或者，如果您想重用它，则创建一个函数并将其放在主函数中

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
，具体取决于您需要什么。。这真是一团糟，但它会起作用：

小提琴：

CSS:

它必须只有css吗？你能使用jQuery吗？我只通过CSS给出了答案-但是如果你愿意尝试的话，可以通过类似LESS的方式更容易地实现。-特别是语言特性/操作视图：不幸的是，这会用内联css污染客户端代码。虽然其他人似乎都认为这很好，但我认为这与基于表的布局相比有很大的不同。（我认为调整到类上的链接而不是id不会是一个问题-那里有一堆元素。）我还忘了提到…没有jQuery。@Rick祝你好运，我认为你不能用纯cssThanks来做。我也这么想——他们忽略了真正有趣的东西。谢谢@remixdesign，我想这就是问题所在。（虽然从技术上讲，它们可以分为3-5组，但当你将它们的宽度降低到40%时，需要0.2%的差异才能改变一个像素的宽度。）但同意-该死的混乱。欢迎你-小更新（不是将媒体查询嵌套在主查询中-这是一个疏忽）为你创建了一个小提琴！如果答案有帮助，请接受！
@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)