Apakah mungkin memasukkan aturan CSS @media?

293

Saya perlu memuat gambar spanduk secara dinamis ke dalam aplikasi HTML5 dan ingin beberapa versi berbeda sesuai dengan lebar layar. Saya tidak dapat menentukan dengan benar lebar layar ponsel, jadi satu-satunya cara saya bisa memikirkan untuk melakukan ini adalah menambahkan gambar latar belakang div dan menggunakan @ media untuk menentukan lebar layar dan menampilkan gambar yang benar.

Sebagai contoh:

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

Apakah ini mungkin, atau ada yang punya saran lain?

html css media-queries Penari
sumber
3
Kecewa dengan jawaban? Lihat komentar ini . Ini mungkin membantu.
rinogo

Jawaban:

285

Tidak, @mediaaturan dan kueri media tidak dapat ada dalam atribut gaya inline karena hanya dapat berisi property: valuedeklarasi. Seperti yang dikatakan spek :

Nilai atribut style harus cocok dengan sintaksis isi blok deklarasi CSS

Satu-satunya cara untuk menerapkan gaya ke elemen hanya di media tertentu adalah dengan aturan terpisah di stylesheet Anda, yang berarti Anda harus membuat pemilih untuk itu.

spanPemilih dummy akan terlihat seperti ini, tetapi jika Anda menargetkan elemen yang sangat spesifik, Anda akan membutuhkan pemilih yang lebih spesifik:

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
BoltClock
sumber
70
Anda juga bisa memasukkan <style>tag ke HTML Anda juga. Ini adalah pendekatan yang diperlukan untuk kasus di mana background-imagesecara dinamis ditarik dari database. Jelas di stylesheet eksternal bukan tempat yang tepat untuk itu.
Jake Wilson
1
@ Jakobud: Ya, tidak masalah di mana stylesheet berada tetapi intinya adalah Anda hanya dapat melakukan ini dalam CSS, bukan atribut gaya inline.
BoltClock
3
Catatan untuk penjelajah di masa depan bahwa <script>tag sering dilucuti oleh klien email ketika email diteruskan, sehingga orang cenderung menggunakan gaya in-line untuk email. Dan ini berarti tidak ada permintaan media. Saat ini saya sedang mencari praktik terbaik untuk situasi ini, tetapi hanya ramah tamah.
TCannadySF
3
Harap setel lebar maks dalam ems, bukan dalam px. Dengan begitu itu akan tetap berfungsi dengan baik saat Anda memperbesar.
Silas S. Brown
2
@Silas S. Brown: Itu bukan masalah saya. Saya hanya mencerminkan apa yang digunakan dalam pertanyaan itu.
BoltClock
137

Masalah

Tidak, Kueri Media tidak dapat digunakan dengan cara ini 

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

Larutan

Tetapi jika Anda ingin memberikan perilaku tertentu yang dapat digunakan dengan cepat DAN responsif, Anda dapat menggunakan stylemarkup dan bukan atributnya.

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>

Lihat kode yang aktif di CodePen

Di Blog saya misalnya, saya menyuntikkan <style>markup <head>tepat setelah <link>deklarasi untuk CSS dan itu berisi konten textarea yang disediakan di samping textarea konten nyata untuk membuat kelas tambahan saat saya menulis artitle.

Catatan: scopedatribut adalah bagian dari spesifikasi HTML5. Jika Anda tidak menggunakannya, validator akan menyalahkan Anda, tetapi browser saat ini tidak mendukung tujuan sebenarnya: mencakup konten <style>hanya pada elemen induk dan elemen anak elemen itu. Scoped tidak wajib jika <style>elemen dalam <head>markup.

UPDATE: Saya menyarankan untuk selalu menggunakan aturan dalam cara seluler terlebih dahulu sehingga kode sebelumnya harus:

<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
sumber
10
Ini adalah jawaban yang lebih baik daripada jawaban yang diterima karena ini memungkinkan Anda untuk mengubah secara dinamis background-imagesaat halaman dimuat.
Jake Wilson
7
Meskipun pada prinsipnya cakupan tampak hebat, Chrome menghapus dukungan awal mereka beberapa versi kembali dan sekarang hanya Firefox yang memiliki dukungan apa pun.
Anthony McLin
1
Scoped hanya digunakan untuk tidak mengizinkan .on-the-fly-behavioruntuk digunakan di mana pun tetapi jika kata «diabaikan» oleh beberapa navigator tidak menjadi masalah. <style> dapat digunakan di <body> di semua navigator, ini berfungsi. Itu hanya persyaratan validasi w3c.
Bruno Lesieur
4
Meskipun scopedmerupakan solusi yang brilian, itu tidak didukung secara resmi oleh browser apa pun. Semoga itu akan segera berubah.
Ken Sharp
1
Ini adalah pertanyaan lain, karena tujuan utama Email adalah membaca oleh Email Klien dan banyak Email Klien tidak mendukung penyematan <style>, atau media queriesatau semua fitur HTML / CSS. Jadi sebenarnya masalahnya lebih besar dari itu. Saya hanya tahu Anda dapat membuat email yang ditampilkan dengan cara yang sama di semua Email Klien (termasuk Gmail) dengan hanya fitur HTML4 dan CSS2 (dengan beberapa peretasan Outlook), tetapi tidak ada Pertanyaan Media dalam hal ini.
Bruno Lesieur
15

Gaya sebaris saat ini tidak dapat berisi apa pun selain deklarasi ( property: valuepasangan).

Anda dapat menggunakan styleelemen dengan mediaatribut yang sesuai di headbagian dokumen Anda.

Marat Tanalin
sumber
13

Ya, Anda dapat menulis kueri media dalam inline-css jika Anda menggunakan tag gambar. Untuk ukuran perangkat yang berbeda, Anda bisa mendapatkan gambar yang berbeda.

<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 Hussain
sumber
Ini tidak berlaku untuk CSS background-image: url ()
Jonas Eberle
10

Jika Anda menggunakan Bootstrap Responsive Utilities atau alternatif serupa yang memungkinkan untuk menyembunyikan / menampilkan div tergantung pada break point, dimungkinkan untuk menggunakan beberapa elemen dan menunjukkan yang paling tepat. yaitu

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
Pavel
sumber
3
Solusi yang bagus - sembunyikan div, tampilkan div berdasarkan kueri media - satu-satunya kelemahan yang saya lihat adalah masih memuat kedua gambar sehingga Anda akan mengirim keduanya ke klien.
Michael C. Gates
4
Konten duplikat bukan hal yang baik untuk pemeliharaan atau SEO.
Bruno Lesieur
1
Sayangnya ini adalah teman palsu! Saya memikirkan solusi ini juga, tetapi kami ingin gambar yang lebih kecil untuk melayani perangkat kecil dan menyimpan byte untuk diunduh. Teknik ini melakukan yang sebaliknya
A. D'Alfonso
8

Query Media dalam style-Attributes tidak dimungkinkan saat ini. Tetapi jika Anda harus mengatur ini secara dinamis melalui Javascript. Anda bisa memasukkan aturan itu melalui JS juga.

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

Ini seolah-olah gaya itu ada di stylesheet. Jadi waspadai kekhususan.

Jenis-Gaya
sumber
ada ide kapan itu mungkin?
SuperUberDuper
1
Saya pikir itu tidak akan terjadi. Tetapi saya tidak menyadari semua hal yang dilakukan oleh kelompok kerja.
Tipe-Gaya
8

Hei aku baru saja menulisnya.

Sekarang Anda dapat menggunakan <div style="color: red; @media (max-width: 200px) { color: green }">atau lebih.

Nikmati.

Даниил Пронин
sumber
Saya memilih ini, karena tampaknya berfungsi saat itu, tetapi tidak. #sad
honk31
@ honk31 itu dunia hanya untuk satu at-rule
Даниил Пронин
7

Saya mencoba menguji ini dan sepertinya tidak berhasil tetapi saya ingin tahu mengapa Apple menggunakannya. Saya baru saja menggunakan https://linkmaker.itunes.apple.com/us/ dan melihat dalam kode yang dihasilkannya jika Anda memilih tombol radio 'Tombol Besar', mereka menggunakan kueri media sebaris.

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

catatan: menambahkan jeda baris untuk keterbacaan, kode asli yang dihasilkan diperkecil

davidcondrey
sumber
3
Saya ingin tahu mengapa / bagaimana Apple menggunakan itu juga
Douglas.Sesar
1
Kode yang dikutip tidak lagi ada di tautan yang diberikan (setidaknya untuk saya; mungkin saya mendapatkan konten yang berbeda karena berada di luar AS). Selain itu, ini sepertinya lebih seperti pertanyaan terpisah yang dijawab.
Mark Amery
1
Saya mengirimkan laporan bug dan saya percaya mereka telah menghapusnya. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
davidcondrey
4

Anda dapat menggunakan gambar-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);">
the7oker
sumber
2
Perhatikan bahwa ini hanya didukung di browser berbasis Webkit sekarang.
Qqwy
Ini tidak bekerja berdasarkan ukuran (seperti yang dijabarkan dalam pertanyaan) tetapi pada faktor zoom, jadi Anda mungkin mendapatkan gambar untuk layar kecil pada layar 27 “2560x1440. Mungkin itu yang Anda inginkan - atau mungkin tidak.
Jan Buhler
4

ya, Anda bisa melakukannya dengan javascript di window.matchMedia

  1. desktop untuk teks warna merah

  2. tablet untuk teks warna hijau

  3. mobile untuk teks warna biru

//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>
Luaskan cuplikan

ßãlãjî
sumber
3

Kueri media sebaris dimungkinkan dengan menggunakan sesuatu seperti Breakpoint untuk Sass

Posting blog ini berfungsi dengan baik menjelaskan bagaimana kueri media sebaris lebih mudah dikelola daripada blok terpisah: Tidak Ada Breakpoint

Terkait dengan kueri media inline adalah gagasan "kueri elemen", beberapa bacaan yang menarik adalah:

  1. Pikiran tentang Pertanyaan Media untuk Elemen
  2. Pertanyaan Media adalah Peretasan
  3. Media Query Bukan Jawabannya: Element Query Polyfill
  4. kalau tidak blok
Rafael Lüder
sumber
1

jika Anda menambahkan aturan ke file print.css Anda tidak harus menggunakan @ media.

Saya tidak menyertakannya di smarty foreach yang saya gunakan untuk memberikan beberapa elemen warna latar belakang.

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

Paul Wolbers
sumber