Bolehkah CSS Sebaris Mengendalikan Pertanyaan Media untuk Pemuatan Imej Dinamik?

Peraturan @media CSS Sebaris: Pendekatan yang Boleh Dilaksanakan?

Dalam pembangunan web, memuatkan imej sepanduk secara dinamik berdasarkan lebar skrin adalah keperluan biasa . Satu penyelesaian yang berpotensi ialah menggunakan peraturan CSS @media sebaris untuk menentukan lebar skrin dan memaparkan imej yang sesuai. Walau bagaimanapun, kebolehlaksanaan pendekatan ini telah menimbulkan persoalan.

Kekangan CSS Sebaris

Malangnya, atribut CSS sebaris terhad dalam sintaksnya dan tidak dapat menampung @media at-rules atau pertanyaan media. Mengikut spesifikasi CSS, nilai atribut gaya mesti mematuhi sintaks kandungan blok pengisytiharan CSS, yang mengecualikan binaan ini.

Penyelesaian Alternatif

Oleh itu, yang utama pilihan untuk menggunakan gaya khusus media pada elemen tertentu adalah untuk menentukan отдельное правило dalam helaian gaya:

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

@media (max-width: 300px) {
  #myelement {
    background-image: url(particular_ad_small.png);
  }
}

Untuk kes di mana mengasingkan elemen menggunakan pemilih adalah mencabar, sifat tersuai menyediakan penyelesaian yang berdaya maju, dengan mengandaikan sokongan untuk tugasan pembolehubah bukanlah satu isu:

:root {
  --particular-ad: url(particular_ad.png);
}

@media (max-width: 300px) {
  :root {
    --particular-ad: url(particular_ad_small.png);
  }
}

<span>

Atas ialah kandungan terperinci Bolehkah CSS Sebaris Mengendalikan Pertanyaan Media untuk Pemuatan Imej Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!