JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p></p>

CSS

p {
  text-align: center;
  padding: 30px;
}

JavaScript

window
	.matchMedia('(max-width: 450px)')
  .addListener(test);
  
const parag = document.querySelector('p');

function test(e){
	if(e.matches) {
  	parag.innerHTML = 'Smaller than 450px width !'
  	console.log('Smaller than 450px width !')
  }
  else {
  parag.innerHTML = 'Bigger than 450px width !'
  	console.log('Bigger than 450px width !')
  }
}