Problem
No, Media Queries cannot be used in this way
<span style="@media (...) { ... }"></span>
Solution
But if you want provided a specific behavior usable on the fly AND responsive, you can use the style
markup and not the attribute.
e.i.
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
See the code working in live on CodePen
In my Blog for example, I inject a <style>
markup in <head>
just after <link>
declaration for CSS and it's contain the content of a textarea provided beside of real content textarea for create extra-class on the fly when I wrote an artitle.
Note : the scoped
attribute is a part of HTML5 specification. If you do not use it, the validator will blame you but browsers currently not support the real purpose : scoped the content of <style>
only on immediatly parent element and that element's child elements. Scoped is not mandatory if the <style>
element is in <head>
markup.
UPDATE: I advice to always use rules in the mobile first way so previous code should be:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>