CSS @ medya kurallarını satır içine koymak mümkün müdür?

293

Banner görüntülerini dinamik olarak bir HTML5 uygulamasına yüklemem gerekiyor ve ekran genişliklerine uyacak birkaç farklı sürüm istiyorum. Telefonun ekran genişliğini doğru bir şekilde belirleyemiyorum, bu yüzden bunu yapmanın tek yolu bir div'ın arka plan görüntülerini eklemek ve @media'yı ekran genişliğini belirlemek ve doğru görüntüyü görüntülemek için kullanmaktır.

Örneğin:

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

Bu mümkün mü, yoksa başka bir önerisi olan var mı?

html  css  media-queries 
— Dansçı
kaynak
3
Cevapları hayal kırıklığına uğramış mı? Bu yoruma bakın . Yardımcı olabilir.
— rinogo

Yanıtlar:

285

Hayır, @mediakurallar ve medya sorguları, yalnızca property: valuebildirimler içerebildikleri için satır içi stil özelliklerinde bulunamaz . As Spec koyar o:

Style özelliğinin değeri, bir CSS bildirim bloğunun içeriğinin sözdizimiyle eşleşmelidir

Bir öğeye yalnızca belirli ortamlarda stil uygulamanın tek yolu, stil sayfanızdaki ayrı bir kuraldır, yani bunun için bir seçici bulmanız gerekir.

Bir kukla spanseçici şöyle görünür, ancak çok spesifik bir öğeyi hedefliyorsanız daha spesifik bir seçiciye ihtiyacınız olacaktır:

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— BoltClock
kaynak
70
<style>HTML'nize de bir etiket koyabilirsiniz . Bu, background-imagedinamik olarak bir veritabanından alındığı durum için gerekli bir yaklaşımdır . Dış stil sayfasında açıkçası bunun için doğru yer değil.
— Jake Wilson
1
@ Jakobud: Evet, stil sayfasının nerede olduğu önemli değil ama asıl nokta bunu satır içi stil niteliğinde değil, yalnızca CSS'de yapabilmeniz.
— BoltClock
3
Gelecekteki kaşiflere, <script>bir e-posta iletildiğinde etiketin genellikle e-posta istemcileri tarafından kaldırıldığını unutmayın; bu nedenle insanlar e-postalar için satır içi stiller kullanmaya eğilimlidir. Bu da medya sorgusu olmadığı anlamına gelir. Şu anda bu durum için en iyi uygulamaları arıyorum, ama sadece dostane bir kafa karıştırıcı.
— TCannadySF
3
Lütfen maks. Genişliği ems olarak girin, değil px. Bu şekilde zum yaptığınızda yine de mantıklı çalışır.
— Silas S. Brown
2
@Silas S. Brown: Bu benim sorunum değil. Sadece soruda kullanılanları yansıtıyorum.
— BoltClock
137

Sorun

Hayır, Medya Sorguları bu şekilde kullanılamaz 

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

Çözüm

Ancak, anında VE duyarlı olarak kullanılabilen belirli bir davranış sağlamak istiyorsanız style, niteliği değil, işaretlemeyi kullanabilirsiniz .

ei

<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'de canlı olarak çalışan koda bakın

Örneğin benim blog, ben iğne yapmak bir de <style>biçimlendirme içinde <head>hemen sonra <link>CSS beyanı ve ben bir artitle yazarken anında ekstra sınıf oluşturmak için yanında gerçek içerik giriş alanlarının sağlanan bir textarea içeriği bu.

Not: scopedözellik, HTML5 spesifikasyonunun bir parçasıdır. Bunu kullanmazsanız, doğrulayıcı sizi suçlar, ancak tarayıcılar şu anda gerçek amacı desteklemez: <style>yalnızca hemen üst öğenin ve o öğenin alt öğelerinin içeriğini kapsamıştır . <style>Eleman <head>işaretlemede ise kapsam dahilinde olmak zorunlu değildir .

GÜNCELLEME: Önceki kodun olması için kuralları her zaman mobil olarak ilk şekilde kullanmanızı öneririm:

<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>
— Bruno Lesieur
kaynak
10
Bu, kabul edilen yanıttan daha iyi bir yanıttır çünkü background-imagesayfa yüklendiğinde dinamik olarak değiştirmenize izin verir .
— Jake Wilson
7
Kapsamlı olarak prensipte harika görünse de, Chrome ön desteklerini birkaç sürümden kaldırdı ve şimdi sadece Firefox'un herhangi bir desteği var.
— Anthony McLin
1
Scoped sadece kullanılmasına izin vermemek .on-the-fly-behavioriçin kullanılır, ancak kelime bazı gezginler tarafından "yoksay" ise sorun olmaz. <style> tüm gezginlerde <body> içinde kullanılabilir, bu işe yarar. Bu sadece bir w3c doğrulama gereksinimidir.
— Bruno Lesieur
4
scopedParlak bir çözüm olmasına rağmen herhangi bir tarayıcı tarafından resmi olarak desteklenmemektedir. Umarım bu yakında değişecektir.
— Ken Sharp
1
Bir E-ana amacı gömme desteklemeyen bir istemci E-posta ve birçok Müşteri E-posta ile okumak zorunda olduğundan bu, bir başka soru <style>veya media queriestüm HTML / CSS özelliği veya. Aslında sorun bundan daha büyük. Yalnızca HTML4 ve CSS2 özelliğiyle (bazı Outlook saldırılarıyla) tüm İstemci E-postalarında (Gmail dahil) aynı şekilde görüntülenen e-posta oluşturabileceğinizi biliyorum, ancak bu durumda Medya Sorgusu yoktur.
— Bruno Lesieur
15

Satır içi stiller şu anda bildirimler ( property: valueçiftler) dışında bir şey içeremez .

Belgenizin bölümünde styleuygun mediaözelliklere sahip öğeleri kullanabilirsiniz head.

— Marat Tanalin
kaynak
13

Evet, resim etiketi kullanıyorsanız inline-css içine medya sorgusu yazabilirsiniz. Farklı cihaz boyutları için farklı görüntüler elde edebilirsiniz.

<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>
— Arif Hüseyin
kaynak
Bu, CSS arka plan resmi için geçerli değildir: url ()
— Jonas Eberle
10

Eğer kullanıyorsanız Bootstrap Duyarlı Utilities veya postu sağlayan benzer alternatifini / kırılma noktalarının bağlı div'leri göstermek, birkaç unsurları kullanmak ve en uygun düzgün göstermek mümkün olabilir. yani

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— Pavel
kaynak
3
Güzel geçici çözüm - div'ı gizle, medya sorgusuna göre div göster - gördüğüm tek dezavantaj hala her iki görüntüyü de yükleyecek, böylece her ikisini de istemciye göndereceksiniz.
— Michael C. Gates
4
Yinelenen içerik, bakım veya SEO için iyi bir şey değildir.
— Bruno Lesieur
1
Ne yazık ki bu yanlış bir arkadaş! Ben de bu çözümü düşündüm, ancak küçük resimlerin küçük cihazlara sunulmasını ve indirilecek baytlardan tasarruf etmesini istiyoruz. Bu teknik tam tersini yapıyor
— A. D'Alfonso
8

Style-Attributes içindeki medya sorguları şu anda mümkün değil. Ancak bunu Javascript aracılığıyla dinamik olarak ayarlamanız gerekiyorsa. Bu kuralı JS aracılığıyla da ekleyebilirsiniz.

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

Bu, stil stil sayfasında varmış gibi. Bu yüzden özgüllüğün farkında olun.

— Tip-Style
kaynak
mümkün olduğunda herhangi bir fikir?
— SuperUberDuper
1
Olacağını sanmıyorum. Ama çalışma gruplarının yaptığı her şeyin farkında değilim.
— Type-Style
7

Bunu test etmeye çalıştım ve işe yaramadı ama Apple'ın neden kullandığını merak ediyorum. Sadece https://linkmaker.itunes.apple.com/us/ adresindeydim ve 'Büyük Düğme' radyo düğmesini seçerseniz sağlanan kodda fark ettim, bunlar bir satır içi medya sorgusu kullanıyorlar.

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

not: okunabilirlik için satır sonları eklendiğinde, oluşturulan orijinal kod küçültülür

— davidcondrey
kaynak
3
Apple'ın bunu neden / nasıl kullandığını bilmek istiyorum
— Douglas.Sesar
1
Alıntılanan kod artık verilen bağlantıda yok (en azından benim için; belki de ABD dışında olduğum için farklı içerik alıyorum). Ayrıca, bu daha çok ayrı bir soru gibi görünüyor.
— Mark Amery
1
Bir hata raporu gönderdim ve o zamandan beri kaldırdıklarına inanıyorum. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— davidcondrey
4

İmage-set () kullanabilirsiniz

<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);">
— the7oker
kaynak
2
— Qqwy
Bu, boyuta (soruda belirtildiği gibi) değil, yakınlaştırma faktörüne göre çalışmaz, bu nedenle 27 “2560x1440 ekranındaki küçük ekranlar için resim alabilirsiniz. İstediğiniz bu olabilir ya da olmayabilir.
— Jan Bühler
4

evet, javascript ile window.matchMedia tarafından yapabilirsiniz

  1. kırmızı renkli metin için masaüstü

  2. yeşil renkli metin için tablet

  3. mavi renkli metin için mobil

//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>
Snippet'i genişlet

— ßãlãjî
kaynak
3

Satır içi medya sorguları, Breakpoint gibi bir şey kullanarak mümkündür Sass için

Bu blog gönderisi, satır içi medya sorgularının ayrı bloklardan nasıl daha yönetilebilir olduğunu açıklayan iyi bir iş çıkarıyor: Kesme Noktası Yok

Satır içi medya sorgularıyla ilgili olarak "öğe sorguları" fikri, birkaç ilginç okuma:

  1. Öğeler için Medya Sorguları Üzerine Düşünceler
  2. Medya Sorguları Bir Hack
  3. Medya Sorguları Yanıt Değil: Öğe Sorgu Çoklu Dolgusu
  4. başka engeller varsa
— Rafael Lüder
kaynak
1

kuralı print.css dosyasına eklerseniz @media kullanmanız gerekmez.

Bazı öğelere arka plan rengi vermek için kullandığım smarty foreach'de yer almadım.

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

— Paul Wolbers
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.