在减小窗口大小时如何增加元素宽度？

Question

我正在编写一个适合桌面和移动设备的网站，当然最初的想法是使用百分比宽度，然后设置一个移动CSS样式表，如果屏幕低于700px，则将元素宽度更改为100％。

问题在于你越过障碍时发生的“笨拙”。

所以我想，“为什么不添加一个jQuery resize脚本来流畅地调整元素的大小以避免clunk？”

问题在于写出等式。

我明白了，但现在我担心它消耗了多少处理能力。我不希望此功能落后于网站的其他部分。

这是我的jFiddle： http://jsfiddle.net/jp685suz/1/

......和等式：

var windowW = $(window).innerWidth();
var rangeMax = 1000; //Change occurs between 700px and 1000px
var rangeMin = 700;
var rangeDiff = 1000-700;
var minWidth = 50;
var dynWidth = Math.round(((1-(((rangeDiff-(rangeMax-windowW))/rangeDiff)/(100/(100-minWidth))))*100)*10)/10;

尝试调整窗口大小以查看我的意思。它现在不是很迟钝，但是在​​幻灯片和其他jQuery函数中添加一些高分辨率的照片并且它并不完美。当然这不是一个大问题，因为大多数人不会经常调整窗口大小，但我喜欢炫耀。

我的等式可以简化吗？也许有一些内置于jQuery的东西可以做到这一点吗？

Answer 1

你可以使用CSS过渡来获得你想要的效果。

transition: width 1s ease;

请参阅修改过的小提琴http://jsfiddle.net/3wtfenk2/

没有使用javascript。

Answer 2

你想要这个：

当窗口小于100%宽时，
• 700px宽度。
当窗口宽度超过50%时
• 1000px宽度。

然后，您决定在700px和1000px之间线性减少百分比。

但是，存在一个问题：当百分比得到解决时，使用的宽度变为

正如您所看到的，增加窗口的宽度会减小剖面的宽度，从而产生非常奇怪的效果。

让我提出一个不同的方法：

当窗口小于100%宽时，
• 700px宽度。
当窗口为100% = 700px宽时，
• 700px宽度。
当窗口在700px和700px之间时，
• 1400px宽度。
当窗口为50% = 700px宽时，
• 1400px宽度。
当窗口宽度超过50%时
• 1400px宽度。

也就是说，使用700px的恒定宽度，并用百分比来夹住它：

width: 700px;
min-width: 50%;
max-width: 100%;

section {
  width: 700px;
  min-width: 50%;
  max-width: 100%;
  margin: 0 auto;
}
section:before {
  content: '';
  display: block;
  height: 100px;
  background-color: olivedrab;
}

<section>
  <p>This olive green box will be a reasonable size on a big monitor (50% of the screen), and will fill the screen (100%) if it gets smaller than 700px (i.e. mobile).</p>
  <p>The transition is smooth. Go ahead, try resizing the window and see how pretty!</p>
  <p>This is not as "clunky" as setting a CSS mobile screen profile, but uses jQuery which isn't always a good idea.</p>
</section>