減小窗口大小時如何增加元素寬度？

Question

我正在編寫一個適合桌面和移動設備的網站，當然，最初的想法是使用百分比寬度，然后設置一個移動CSS樣式表，如果屏幕小於700像素，則將元素寬度更改為100％。

這樣做的問題是您越過障礙物時出現的“結塊”。

所以我想：“為什么不添加一個jQuery調整大小腳本來流暢地調整元素的大小，以免產生麻煩？”

問題在於寫方程式。

我想通了，但是現在我擔心它會消耗多少處理能力。 我不希望此功能落后於網站的其余部分。

這是我的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

你要這個：

• 窗口寬度小於700px時，寬度為100% 。
• 窗口大於1000px時，寬度為50% 。

然后，您決定在700px和1000px之間線性減少百分比。

但是，存在一個問題：解決百分比后，使用的寬度變為

如您所見，增加窗口的寬度會減小該部分的寬度，從而產生非常奇怪的效果。

讓我提出另一種方法：

• 窗口寬度小於700px時，寬度為100% 。
• 當窗口為700px寬時， 100% = 700px 700px寬。
• 700px寬當窗口之間700px和1400px寬。
• 50% = 700px寬度（當窗口為1400px寬時）。
• 窗口大於1400px時，寬度為50% 。

也就是說，使用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 (ie 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>