减小窗口大小时如何增加元素宽度? [英] How do you increase element width as you decrease the window size?

问题描述

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

问题在于当您越过障碍物时会出现结块".

所以我想，为什么不添加一个jQuery调整大小的脚本来流畅地调整元素的大小，以免产生麻烦?"

问题在于写方程式.

我知道了，但是现在我担心它会消耗多少处理能力.我不希望此功能落后于网站的其余部分.

这是我的 jFiddle:

但是，有一个问题:解决百分比后，使用的宽度变为

如您所见，增加窗口的宽度会减小该部分的宽度，从而产生非常奇怪的效果.

让我提出另一种方法:

当窗口小于 700px 宽时，
• 100％宽度.
• 100％= 700px 宽度，当窗口为 700px 宽时.
当窗口在 700px 和 1400px 宽之间时，
• 700px 宽度.
当窗口为 1400px 宽时，
• 50％= 700px 宽度.
当窗口大于 1400px 宽时，
• 50％宽度.

也就是说，使用宽度为 700px 的恒定宽度，并使用百分比对其进行钳制:

  width:700px;最小宽度:50％；最大宽度:100％； 

 部分{宽度:700像素；最小宽度:50％；最大宽度:100％；保证金:0自动;}部分:{之前内容: '';显示:块；高度:100px；背景色:Olivedrab；}  

 < section>< p>这个橄榄绿色的框在大显示器(屏幕的50％)上将是一个合理的尺寸，如果小于700像素(即移动设备)，它将填满屏幕(100％).< p>过渡是平滑的.继续，尝试调整窗口大小，看看有多漂亮！</p>< p>这不像设置CSS移动屏幕配置文件那样笨拙"，但是使用jQuery并不总是一个好主意.</section>  

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?

解决方案

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 (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>

这篇关于减小窗口大小时如何增加元素宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！