JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

JavaScript

const breakpoints = [
  // ratio 2:1
	{ width: 1000, height: 500 },
	{ width: 800, height: 400 },
	{ width: 600, height: 300 },
	{ width: 400, height: 200 },

  // ratio 3:2
	{ width: 750, height: 500 },
	{ width: 600, height: 400 },
	{ width: 450, height: 300 },
	{ width: 300, height: 200 },

  // ratio 1:1
	{ width: 500, height: 500 },
	{ width: 400, height: 400 },
	{ width: 300, height: 300 },
	{ width: 200, height: 200 }
]

function getSuitableBreakpoint(size) {
  return breakpoints.reduce((a, b) => {
		if (b.width >= size.width && b.height >= size.height &&
    	 (a.width < size.width || a.height < size.height)) {
      return b
    }
		if (a.width >= size.width && a.height >= size.height &&
    	 (b.width < size.width || b.height < size.height)) {
      return a
    }
    return Math.pow(a.width - size.width, 2) +
    Math.pow(a.height - size.height, 2) >
    Math.pow(b.width - size.width, 2) +
    Math.pow(b.height - size.height, 2) ?
    b : a
  })
}

test(getSuitableBreakpoint({ width: 200, height: 200 }),
  /* should to be =====> */{ width: 200, height: 200 })
test(getSuitableBreakpoint({ width: 300, height: 300 }),
  /* should to be =====> */{ width: 300, height: 300 })
test(getSuitableBreakpoint({ width: 350, height: 350 }),
  /* should to be =====> */{ width: 400, height: 400 })
test(getSuitableBreakpoint({ width: 400, height: 300 }),
  /* should to be =====> */{ width: 450, height: 300 })
test(getSuitableBreakpoint({ width: 500, height: 300 }),
  /* should to be =====> */{ width: 600, height: 300 })
test(getSuitableBreakpoint({ width: 800, height: 300 }),
  /* should to be =====> */{ width: 800, height: 400 })
test(getSuitableBreakpoint({ width: 800, height: 200 }),
  /* should to be =====> */{ width: 800, height: 400 })
test(getSuitableBreakpoint({ width: 1000, height: 500 }),
  /* should to be =====> */{ width: 1000, height: 500 })

function test(actual, expected) {
	document.body.innerHTML +=
    actual.width == expected.width &&
   ...