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

Question

I'm coding a website to fit both desktop and mobile, and of course the initial thought is to use a percentage width and then setup a mobile CSS stylesheet that changes the element width to 100% if the screen is under 700px.

The problem with that is the "clunk" that occurs when you cross the barrier.

So I thought, "Why not add a jQuery resize script that fluidly resizes the element to avoid the clunk?"

The problem was writing the equation.

I figured it out, but now I'm worried about how much processing power it's using up. I don't want this feature to lag the rest of the website.

Here's my jFiddle: http://jsfiddle.net/jp685suz/1/

...and the equation:

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;

Try resizing the window to see what I mean. It's not laggy now, but add in a few high res photos in a slideshow and other jQuery functions and it isn't perfect. Of course this isn't a huge issue because most people don't resize their window very often, but I like to show off.

Can my equation be simplified? Maybe there's something built-in to jQuery that does this exact thing?

Answer 1

You can use CSS transitions for the effect you're after.

transition: width 1s ease;

See your amended fiddle http://jsfiddle.net/3wtfenk2/

No javascript used.

Answer 2

You want this:

• 100% width when window is less than 700px wide.
• 50% width when window is more than 1000px wide.

Then, you decided to reduce the percentage linearly between 700px and 1000px .

However, there is a problem: when the percentage is resolved, the used width becomes

As you can see, increasing the width of the window reduces the width of the section, producing a very weird effect.

Let me propose a different approach:

• 100% width when window is less than 700px wide.
• 100% = 700px width when window is 700px wide.
• 700px width when window is between 700px and 1400px wide.
• 50% = 700px width when window is 1400px wide.
• 50% width when window is more than 1400px wide.

That is, use a constant width of 700px , and clamp it with percentages:

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>