Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The first answer delivers opposite results, the second the wrong values for screenWidth &lt; 320 and screenWidth > 1200. This one is hopefully correct and maybe a little more readable:</p> <pre><code>var calculatePercentageWidth = function(screenWidth) { var MAX_SCREEN = {percentage: 65, width: 1200}; var MIN_SCREEN = {percentage: 98, width: 320}; if (screenWidth &lt; MIN_SCREEN.width) { return MIN_SCREEN.percentage; } else if (screenWidth &gt; MAX_SCREEN.width) { return MAX_SCREEN.percentage; } else { var coefficient = (MIN_SCREEN.percentage - MAX_SCREEN.percentage) / (MAX_SCREEN.width - MIN_SCREEN.width); return Math.round(MAX_SCREEN.percentage + (screenWidth - MIN_SCREEN.width) * coefficient); } } </code></pre> <p>If the values for the maximum and minimum width or percentage change, you only need to change the values in the constants at the top of the function.</p> <p>To calculate the percentageWidth for screenWidth = 760, write:</p> <pre><code>calculatePercentageWidth(760); </code></pre> <p><a href="http://jsfiddle.net/xBCLw/" rel="nofollow">jsfiddle</a></p> <h2>Corrected version:</h2> <pre><code>var calculatePercentageWidth = function(screenWidth) { var MAX_SCREEN = {percentage: 65, width: 1200}; var MIN_SCREEN = {percentage: 98, width: 320}; if (screenWidth &lt; MIN_SCREEN.width) { return MIN_SCREEN.percentage; } else if (screenWidth &gt; MAX_SCREEN.width) { return MAX_SCREEN.percentage; } else { var coefficient = (MIN_SCREEN.percentage - MAX_SCREEN.percentage) / (MAX_SCREEN.width - MIN_SCREEN.width); return Math.round(MIN_SCREEN.percentage - (screenWidth - MIN_SCREEN.width) * coefficient); } } </code></pre> <p><a href="http://jsfiddle.net/xBCLw/1/" rel="nofollow">jsfiddle</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload