IE10後matchMedia可依設定判斷畫面寬度。
另外再搭配原本CSS的@media,讓響應式網頁實作時有更多彈性。
HTML:
<body>
<div>matchMedia</div>
</body>
CSS:
div {
background-color: blue;
}
@media (max-width: 768px) {
div {
background-color: red;
}
}
Javascript:
var mm = window.matchMedia("(max-width: 768px)");
mm.addListener(resizeWidth);
resizeWidth(mm);
function resizeWidth(pMatchMedia){
if (pMatchMedia.matches) {
//小於768時執行的js
}else {
//大於768時執行的js
}
}