Rang hao shi yong JavaScript jing mei ti cha xun

Shang yi ye Kai tu diao de HTML yuan su
Wuri na baya Kwanan da a yi waje da yanar da kwallon

Shi yong JavaScript jing mei ti cha xun

Mei ti cha xun zai CSS3 zhong chu ru, shi xiang ying fu Web she ji de jie huan yuan su zhi yi. Mei ti cha xun yong yu quan ding shi ku de kuandu he gao du, yi shi wang ye zai suan jing wei bi qie de she bei shang dou xian shi de hen hao.

window.matchMedia() Fang fa hui fan hui yi ge MediaQueryList yuan su, tai bao zheng zhi ding de CSS mei ti cha xun yuan zi jie guo.matchMedia() Fang fa de zhi ke yi shi CSS @media Gui ze de ren he mei ti fei zhen, shi yi Zui xiao gao du、Zui xiao kuandu、Xuan xiang Deng.

Shi li

Ràng chi kuandu xiao yu huo deng yu 700 bi ji, jiu jiang bei jing se geng gai wei huang se. Ràng kuandu da yu 700, jiu jiang qing gai wei fen se:

function myFunction(x) {
  if (x.matches) { // Ràng jie bao chi he
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Chuang jian MediaQueryList yuan su
var x = window.matchMedia("(max-width: 700px)");
// Zai yun xing shi diao yong jian ting huo
myFunction(x);
// Zai zhuang tai geng gai shi fuzhu jian ting huo
x.addEventListener("change", function() {
  myFunction(x);
});

Zi jin shi yi