JavaScript ??? ?? : ??? ? ?? ??

??? ??? ??? ? ?? ????? ????? ??? CSS? ??? ?? ?????.

 ? {
  ??? : ??;
}

@Media (min-width : 768px) {
  ? {
    ??? : ???;
  }
}

CSS ??? ??? ?? ? ???? ???? ??? ??, ?? ??, ??? (? ???, ??) ?? ???? ???? ?????. ??? JavaScript? ?? ??? ?? ??? ????, ?? ?? ??? ?? ?? ? ????? ???? ??? ???? ???? ? ?????.

CSS? ?? JavaScript? ??? ?? ??? ????. ?? ??? ???? ????? : ?? ?? ? ?? ??.

matchMedia() ??

matchMedia() ???? ??? ??? ?? ?? ??? ????? ??? ?????. CSS ?? ???? ?? ?? ???? ???? ???? ??? ?????.

???? CSS? ????? : ??? ?? ???? matchMedia() ? ???? .matches ??? ??????.

 // ??? ?????
const mediaquery = window.matchmedia ( '(min-width : 768px)');

matchMedia() MediaQueryList ??? ?????. .matches ?? (?? ?? ??)? ??? ??? ????? ??? ?????.

 // Viewports? ??? ?? ?? ??? 768px???.
const mediaquery = window.matchmedia ( '(min-width : 768px)');
// ??? ??? ????? ??????
if (mediaquery.matches) {
  // ??? ??????
  ?? ( '??? ?? ??!');
}

??? ?? ??? ?????. ???? ????? ???? ??? ???? ?????.

??? ????

MediaQueryList Media ?? ??? ?? ? ? ??? ? ?? ?? ( .onchange event)? ???? ?? addListener() (? removeListener() )? ?????. ?? ?? ???? ? ??? ?? ?? ? ??? ?????.

 // Viewports? ??? ?? 768px ??? ????.
const mediaquery = window.matchmedia ( '(min-width : 768px)');

?? handletableTchange (e) {
  // ??? ??? ????? ??????
  if (e.matches) {
    // ??? ?????
    Console.log ( '??? ?? ??!');
  } ? ?? {
    Console.log ( '??? ?? ?? ??? ?????!');
  }
}

// ?? ??? ???
mediaquery.addlistener (handletabletchange);

// ?? ??
HandletableTchange (MediaQuery);

addListener() ?? ???? ????. MediaQueryList ??? ?? ???? ???? ??? ???????.

"???"???

??? ?? ?? ???? window.innerWidth ?? window.innerHeight ??? resize ??? ???? ?????. ??? ? ????? ???????.

 ?? checkmediaQuery () {
  // ? ?? ??? 768px?? ?? ??
  if (window.innerWidth> 768) {
    // ??? ?????
    Console.log ( '??? ?? ??!');
  }
}

// ? ?? ?? ???? ???? ?????
window.addeventListener ( 'Resize', CheckMediaQuery);

?? ? ??? matchMedia() ?? ??? ?? ?? ????? ??? ?? ???? ?????.

??

matchMedia() ? MediaQueryList ??? JavaScript Media ?? ??? ???? ??? ? ?? ??? ?? ??? ??? ??? ?? ??? ??? ??? ?????. ?? resize ??? ???? ??? ?????? ? ????? ??? ? ?????. matchMedia() ? ???? ???? ?? ? JavaScript ??? ???? ?????.

??? ?? ???? ?? ??? ?? ? ??? ??? ???? ????. ??? HTML5 ?? ??? ?? ?????.

? ??? JavaScript ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!