問題
いいえ、メディアクエリはこの方法では使用できません
<span style="@media (...) { ... }"></span>
解決
ただし、オンザフライで応答可能な特定の動作を提供したい場合styleは、属性ではなくマークアップを使用できます。
えい
<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>
CodePenで動作しているコードを確認する
たとえば私のブログでは<style>、<head>直後にマークアップを挿入します<link>、CSSの宣言のます。これには、実際のコンテンツのtextareaの横に提供されるtextareaのコンテンツが含まれており、artitleを書き込んだときにその場で追加のクラスを作成します。
注：scoped属性はHTML5仕様の一部です。あなたがそれを使用しない場合、バリデーターはあなたを非難しますが、ブラウザーは現在、実際の目的をサポートしていません：スコープのコンテンツ<style>すぐに親要素とその要素の子要素のみ。<style>要素が<head>マークアップ内にある場合、スコープは必須ではありません。
更新：私は常にモバイルの最初の方法でルールを使用することをお勧めしますので、以前のコードは次のようになります：
<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>