Czy można umieścić CSS @media rules inline?

Muszę dynamicznie ładować obrazy banerów do aplikacji HTML5 i chciałbym, aby kilka różnych wersji pasowało do szerokości ekranu. Nie mogę poprawnie określić szerokości ekranu telefonu, więc jedynym sposobem, w jaki mogę to zrobić, jest dodanie obrazów tła div I użycie @ media do określenia szerokości ekranu i wyświetlenia prawidłowego obrazu.

Na przykład: 

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

Czy to możliwe, czy ktoś ma jakieś inne sugestie?

Author: Mark Amery, 2012-03-21
Source

11 answers

Nie, @media reguły i zapytania o media nie mogą istnieć w atrybutach stylu inline, ponieważ mogą zawierać tylko deklaracje property: value. Jak to ujął spec :

Wartość atrybutu style musi odpowiadać składni zawartości bloku deklaracji CSS

Jedynym sposobem, aby zastosować style do elementu tylko w niektórych mediach, jest osobna reguła w arkuszu stylów, co oznacza, że musisz wymyślić selektor dla niego.

A dummy span selektor wyglądałby tak, ale jeśli celujesz w konkretny element, będziesz potrzebował bardziej konkretnego selektora: 

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
 201
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-11 22:51:09

Problem

Nie, zapytania o Media nie mogą być używane w ten sposób 

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

Rozwiązanie

Ale jeśli chcesz mieć określone zachowanie użyteczne w locie i responsywne, możesz użyć znacznika style, a nie atrybutu.

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>

Zobacz kod działający na żywo na CodePen

W moim blogu na przykład, wstrzykuję <style> znaczniki w <head> tuż po <link> deklaracji dla CSS i zawiera treść z textarea dostarczonego obok prawdziwej zawartości textarea do tworzenia extra-klasy w locie, gdy pisałem artitle.

Uwaga: atrybut scoped jest częścią specyfikacji HTML5. Jeśli go nie użyjesz, walidator będzie Cię obwiniał, ale przeglądarki obecnie nie obsługują rzeczywistego celu: scoped zawartość <style> tylko na elemencie nadrzędnym i elementach podrzędnych tego elementu. Scoped nie jest obowiązkowy, jeśli element <style> znajduje się w znaczniku <head>.

UPDATE: radzę do Zawsze używaj reguł w telefonie komórkowym w pierwszej kolejności, więc poprzedni kod powinien być: 

<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>
 94
Author: Bruno Lesieur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-01 15:01:35

Style Inline nie mogą obecnie zawierać niczego innego niż deklaracje (paryproperty: value).

Można używać elementów style z odpowiednimi atrybutami media w sekcji head dokumentu.

 13
Author: Marat Tanalin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-19 16:05:21

Jeśli używasz Narzędzi responsywnych Bootstrap lub podobnej alternatywy, która pozwala ukryć / pokazać div w zależności od punktów przerwania, może być możliwe użycie kilku elementów i pokazanie najbardziej odpowiedniego. tj. 

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
 6
Author: Pavel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-14 11:27:45

Zapytania o Media w stylu-atrybuty nie są obecnie możliwe. Ale jeśli musisz ustawić to dynamicznie za pomocą Javascript. Możesz wstawić tę regułę za pomocą JS.

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

To tak, jakby styl znajdował się w arkuszu stylów. Bądź więc świadomy specyfiki.

 4
Author: Type-Style,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-03 14:02:14

Próbowałem to przetestować i nie wydaje się działać, ale jestem ciekaw, dlaczego Apple go używa. Byłem na https://linkmaker.itunes.apple.com/us / i zauważyłem w wygenerowanym kodzie, który podaje, jeśli wybierzesz przycisk radiowy "Duży Przycisk", używają zapytania inline media.

<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>

uwaga: dodano podziały linii dla czytelności, oryginalny wygenerowany kod jest minifikowany

 3
Author: davidcondrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-21 00:28:55

Inline media queries są możliwe, używając czegoś takiego jak Breakpoint dla Sass

Ten post na blogu dobrze wyjaśnia, w jaki sposób zapytania Inline są łatwiejsze do zarządzania niż oddzielne bloki: nie ma punktu przerwania

Związane z inline media queries jest idea "element queries", kilka ciekawych odczytów są:

  1. Thoughts on Media Queries for Elements
  2. Media Queries are a Hack
  3. Media Queries Are Not The Answer: Element Query Polyfill
  4. if else blocks
 2
Author: Rafael Lüder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-15 20:44:33

Właśnie to napisałem.

Teraz możesz użyć <div style="color: red; @media (max-width: 200px) { color: green }"> lub tak.

Smacznego.
 2
Author: Даниил Пронин,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-17 08:33:55

Możesz użyć 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
Author: the7oker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-10 13:39:24

Tak, możesz napisać zapytanie o media w inline-css, jeśli używasz znacznika obrazkowego. Dla różnych rozmiarów urządzeń można uzyskać różne obrazy.

<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>
 2
Author: Arif Hussain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-12 06:50:58

Jeśli dodasz regułę do wydruku.plik css nie musisz używać @ media.

Wyłączyłem go w smarty foreach używam, aby nadać niektórym elementom kolor tła.

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
 0
Author: Paul Wolbers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-03 11:10:06