Siirry sisältöön

CSS Media Query -generaattori

Rakenna CSS media queryjä visuaalisesti. Lisää ehtoja näytön koolle, suunnalle, värimallille ja muulle. Käytä esiasetuksia yleisille katkaisupisteille. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

Ehdot
Pika-asetukset
CSS-tuloste
 

Mitä ovat CSS media queryt?

CSS media queryt mahdollistavat tyylien soveltamisen ehdollisesti laitteen ominaisuuksien perusteella, kuten näytön leveys, suunta, värimalliasetukset ja muut. Ne ovat responsiivisen verkkosuunnittelun perusta.

Mediaominaisuudet

min-width / max-width kohdistaa näytön leveyksiin responsiivisissa asetteluissa. orientation tunnistaa pysty- tai vaakasuunnan. prefers-color-scheme kunnioittaa käyttäjän tumma/vaalea-tilan asetusta. prefers-reduced-motion tunnistaa saavutettavuusasetukset. hover ja pointer tunnistavat syöttöominaisuudet.

Tietosuoja

Kaikki media query -luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.