Ja, das ist durchaus möglich, aber nur unter Verwendung von Javascript-Ereignisattributen in HTML-Elementen. Dabei ist zu beachten, dass nicht jedes HTML-Tag-Element jedes js-Ereignis auslösen kann, das auf Änderungen im DOM warten kann, wie z.B. onresize oder js-Code ausführen, wenn DOM geladen wird, wie onload Veranstaltung tut. In dem obigen Beispiel verwende ich Körper y img Tags, da sie in der Lage sind, zu schießen img sólo onload Ereignis, Body-Tag beide onload y onresize . Je nach Ereignis können Sie den Ansatz wählen, um Ihr Problem zu lösen, wie mit dem Code aus den Beispielen.
Mit einer Körper Tag:
<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>
Verwendung von img Tag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
width="100%" style="width: 100vw; height: 1px;"
alt="" height="1"
onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" />
Sie sollten auch bedenken, dass, wenn Sie sich für diese Art der Einbettung von mediaquery css in einen HTML-Brief entscheiden, dieser möglicherweise nicht durch die Blacklists von Mail-Servern kommt, die in den meisten Fällen solche Javascript-Ereignisse unterbinden. Aber für die Zwecke eines Ajax oder Banners, einer dynamischen Anwendung, sollte dieser Ansatz kein Problem darstellen.
