如何用浏览器窗口增量调整div的大小? [英] How to incrementally resize div with browser window?

问题描述

我有一个div，它试图随着调整浏览器窗口的大小而逐渐变宽.也就是说，窗口每宽50像素，我就希望div的宽度也增加50像素.

I have a div that I'm trying to make incrementally wider as the browser window is resized. That is, for every 50px wider the window is, I'd like the div's width to increase by 50px as well.

由于宽度是递增的，所以我不能用百分比来定义它.现在，我正在使用媒体查询，但是为了使其正常工作，我不得不编写大量类似的案例，并且它在不同的浏览器中的表现也不一致.

Since the width is in increments, I can't define it in terms of percentages. Right now I'm using media queries, but in order to make that work, I've had to write a ton of similar cases and it behaves inconsistently in different browsers.

我无法编辑JavaScript.我可以在纯CSS中使用其他编程方式吗?

I can't edit the JavaScript. Is there a more programmatic way I can do this in pure CSS?

这是我的代码.

div {
  background-color: #f00;
  height: 100px;
}

@media (max-width: 1600px) {
  div {
    width: 800px;
  }
}

@media (max-width: 1550px) {
  div {
    width: 750px;
  }
}

/* ... */

@media (max-width: 800px) {
  div {
    width: 0;
  }
}

推荐答案

好消息和坏消息都有.好消息是，有一个mod运算符可用于执行增量大小操作:

Well there's some good news and some bad news. The good news is that there is a mod operator which could be used to do incremental sizes:

width: calc(500px + (100% mod 50px) * 50px);

但是，坏消息是，并非所有浏览器都完全支持此功能.根据我在互联网上阅读的内容，互联网浏览器和 firefox 有点支持，但我无法在Safari/webkit，即使使用-webkit前缀也是如此.

The bad news, however, is that this isn't fully supported by all browsers. From what I've read around the internet, internet explorer and firefox kinda support it, but I couldn't get it working on safari/webkit, even when using the -webkit prefix.

在反复浏览之后，使用了 mod早在2006年就已纳入规范，但在2013年已被删除:(

after poking around some more, mod used to be in the specification back in 2006 but as of 2013 it's been dropped :(

这篇关于如何用浏览器窗口增量调整div的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！