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

??? ??? ?? ??, ??, ??? ? ??? ??? ??? ???? ???? ???? ? ???? ??? CSS ?????. JavaScript? ??? ??? ??? ???? ??? ??? ???? ?? ??? ??? ???? ????? ??????? ??? ???? ???? ??? ? ????? ??? ? ?? ????.

---

1. ??? ??? ??????

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

CSS? ?? ??:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

JavaScript? ???? Window.matchMedia() ???? ???? ??? ??? ??? ???? ?? ??? ? ????.

---

2. ??? ??? JavaScript ??

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

??:

const mediaQuery = window.matchMedia("(max-width: 768px)");

???? ????? ??:

if (mediaQuery.matches) {
  console.log("Viewport is 768px or smaller.");
} else {
  console.log("Viewport is larger than 768px.");
}

---

3. ??? ?? ?? ?? ??

addEventListener ???? ???? ??? ?? ??? ?? ??? ??? ? ????.

?:

const mediaQuery = window.matchMedia("(max-width: 768px)");

function handleMediaQueryChange(e) {
  if (e.matches) {
    console.log("Now in mobile view.");
  } else {
    console.log("Now in desktop view.");
  }
}

// Attach listener
mediaQuery.addEventListener("change", handleMediaQueryChange);

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

---

4. ???? ?? ??

a) ?? ???? ??

?? ??? ?? JavaScript ?? ????? ?????.

const mediaQuery = window.matchMedia("(max-width: 768px)");

function adjustLayout() {
  if (mediaQuery.matches) {
    document.body.style.backgroundColor = "lightblue";
  } else {
    document.body.style.backgroundColor = "white";
  }
}

// Initial check and listener
adjustLayout();
mediaQuery.addEventListener("change", adjustLayout);

b) ???? ???? ??

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

const mediaQuery = window.matchMedia("(max-width: 768px)");

if (mediaQuery.matches) {
  // Load mobile-specific script
  import("./mobile.js").then(module => {
    module.init();
  });
}

c) ????? ??

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

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

---

5. JavaScript? ??? ?? ??? ??

1. ?? ??: ???? ?? ???? ??? ?? ??? ?????.
2. ?? ???: ???? ????? ???? ?????.
3. ??? ???: ??? ??? ?? ??? ?? ??? ?? ?????.
4. ??? UX: ??? ??? ???? ?? ????? ??????.

---

6. ?? ??

• CSS? JavaScript ??: ??? ???? CSS? ???? ???? JavaScript? ?????.
• ?? ?? ??? ????: ? ?? ??? ??? ? ?? ??? ????? ???? ???????.
• ??: ???? ?? ????? ?? ?? ??? ?? ?????.
• ?? ?? ??: ? ?? ???? ?? addListener?? addEventListener? ?????.

---

7. ???? ???

???? ?? ????? Window.matchMedia() API? ???? ?????. ??? ?? ??????? MediaQueryList? addEventListener ???? ?? ???? ??? ? ????.

---

8. ?: ??? ?? ??

??? ??? ??? JavaScript? ???? ??? ??? ???? ?? ????.

const mediaQuery = window.matchMedia("(max-width: 768px)");

---

9. ??

JavaScript? ??? ??? ???? ?? ???? ???? ??? ???? ?? ? ????. ??? ?? ??? ?? ??? ???? ?? ??? ????? ??? ? ?? ??? ??? ??? ?? ?????. ??? ??? ??? ?? ????? ?? ???? ? ??????? ???? ? ??????.

?????. ?? Abhay Singh Kathayat???!
**?? ?????? ??? ?? ??? ?? ?? ??? ?? ??? ??????. ?? ????? ?? ???? ??? ???? ??????? ???? ?? ??? ????? ??? ?????? ???? ?????.
? ???? ???? **kaashshorts28@gmail.com.

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

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