web-dev-qa-db-ja.com

CSSの@mediaルールをインラインにすることは可能ですか？

私は動的にバナー画像をHTML5アプリにロードする必要があり、画面の幅に合うようにいくつかの異なるバージョンが欲しいと思います。私は電話の画面幅を正しく判断できないので、これを考えることができる唯一の方法はdivの背景画像を追加し、画面幅を決定して正しい画像を表示するために@mediaを使うことです。

例えば：

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

これは可能ですか、それとも他に何か提案がありますか？

htmlcsscss3media-queries
236
Dancer

いいえ、@mediaのルールとメディアクエリは、property: valueの宣言のみを含むことができるため、インラインスタイルの属性には存在できません。 の仕様 には次のように書かれています。

Style属性の値は、CSS 宣言ブロックの内容の構文と一致している必要があります

特定のメディアでのみ要素にスタイルを適用する唯一の方法は、スタイルシートの個別のルールを使用することです。つまり、セレクタを作成する必要があります。

ダミーのspanセレクタはこのようになりますが、非常に特定の要素をターゲットにしている場合は、より特定のセレクタが必要になります。

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
236
BoltClock

問題

いいえ、メディアクエリをこのように使用することはできません

<span style="@media (...) { ... }"></span>

解決策

しかし、その場で使えるANDレスポンシブな特定の振る舞いを提供したい場合は、属性ではなくstyleマークアップを使用できます。

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>

CodePenで実際に動作しているコードを参照してください

たとえば私のブログでは、CSSの<style>宣言の直後に<head>に<link>マークアップを挿入しています。これには、実際のコンテンツtextareaのほかに提供されるtextareaのコンテンツが含まれています。

注：scoped属性はHTML5仕様の一部です。使用しない場合、バリデーターはあなたのせいになりますが、現在ブラウザは本当の目的をサポートしていません：<style>の内容をただちに親要素とその要素の子要素に限定しました。 <style>要素が<head>マークアップ内にある場合、Scopedは必須ではありません。

更新：私はいつもモバイル第一の方法でルールを使用することをお勧めしますので、以前のコードは次のようになります。

<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>
112
Bruno Lesieur

インラインスタイルには、現在宣言以外のもの（property: valueの組）を含めることはできません。

ドキュメントのstyleセクションでは、適切なmedia属性を持つhead要素を使用できます。

13
Marat Tanalin

はい、画像タグを使用している場合は、インラインクエリでメディアクエリーを記述できます。デバイスサイズが異なると、異なる画像を取得できます。

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
8
Arif Hussain

Bootstrap Responsive Utilities またはブレークポイントに応じてdivを表示/非表示にできる同様の方法を使用している場合は、いくつかの要素を使用することができます。最も適切なものを見せる。すなわち.

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
6
Pavel

Style-Attributesのメディアクエリは現在不可能です。しかし、あなたがJavascriptを通してこれを動的に設定しなければならないならば。その規則をJSでも挿入できます。

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

これは、スタイルシートにスタイルがあるかのようです。そのため、特異性に注意してください。

4
Type-Style

ちょっと書いたばかりです

これで<div style="color: red; @media (max-width: 200px) { color: green }">などを使うことができます。

楽しい。

3
Даниил Пронин

私はこれをテストしようとしましたが、うまくいきませんでしたが、なぜAppleがそれを使っているのか興味があります。私はちょうど https://linkmaker.iTunes.Apple.com/us/ にいて、 'Large'を選択するとそれが提供する生成コードに気づきましたボタンのラジオボタンは、インラインメディアクエリを使用しています。

<a href="#" 
    target="iTunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

注：読みやすくするために改行が追加され、元の生成コードは縮小されます

3
davidcondrey

あなたはimage-set（）を使うことができます

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">
2
the7oker

Sassに Breakpoint のようなものを使用することでインラインメディアクエリが可能です。

このブログ記事では、インラインメディアクエリが個別のブロックよりも管理しやすい方法について説明しています。 ブレークポイントはありません

インラインメディアクエリに関連するのは、 "要素クエリ"のアイデアです。興味深い読み物がいくつかあります。

  1. 要素に対するメディアクエリについての考察
  2. メディアクエリはハックです
  3. メディアクエリは答えではありません：要素クエリポリフィル
  4. それ以外の場合は
2
Rafael Lüder

はい、javascriptをwindow.matchMediaで実行できます

  1. 赤色のテキスト用のデスクトップ

  2. 緑色のテキスト用のタブレット

  3. 青色のテキスト用のモバイル
//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
1
ßãlãjî

print.cssファイルにルールを追加すれば、@ mediaを使う必要はありません。

私はいくつかの要素に背景色を与えるために私が使っているスマートなforeachでそれを除外しました。

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
0
Paul Wolbers