Hướng dẫn tạo Responsive với Javascript Media Queries

     Thiết kế Responsive để trang Web hiển thị phù hợp, không bị vỡ Layout khi người dùng sử dụng các thiết bị khác nhau.
     Thường thì ta sử dụng CSS3 để thực hiện, tuy nhiên trong một số trường hợp, sử dụng Responsive Media Queries lại là lựa chọn tốt hơn.

Hướng dẫn tạo trang Responsive với Javascript Media Queries

Chèn đoạn code bên dưới trước thẻ </body>:

Cách 1

<script type='text/javascript'>
// media query event handler
if (matchMedia) {
  const mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }
}
</script>

Cách 2

<script type='text/javascript'>
var mql = window.matchMedia('screen and (min-width: 500px)');if (mql.matches){
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }
</script>