Mikä on CSS Media Query?

CSS media query on tekniikka, jonka avulla voit soveltaa erilaisia tyylejä laitteiden ominaisuuksien, kuten näytön koon, tarkkuuden, suuntautumisen tai värimallin, perusteella. Media queryt ovat responsiivisen web-suunnittelun perusta, mahdollistaen verkkosivustojen mukauttaa asetteluaan ja ulkoasujaan eri laitteilla – älypuhelimista työpöytänäyttöihin. Ne käyttävät @media-sääntöä CSS:ssä soveltaakseen tyylejä ehdollisesti vain, kun tietyt ehdot täyttyvät.

Työkalun kuvaus

Tämä työkalu auttaa sinua luomaan CSS media queryja ilman, että sinun täytyy muistaa monimutkaista syntaksia. Valitse vain kohdemedia-tyyppi, määritä mitat, valitse laiteominaisuudet, ja työkalu generoi täydellisen @media-säännön, joka on valmis käytettäväksi tyylitiedostoissasi. Se tukee kaikkia nykyaikaisia media query -ominaisuuksia, mukaan lukien viewport-mitat, näytön suuntautuminen, kuvasuhteet, tarkkuuden tunnistus ja värimallin asetukset.

Ominaisuudet

  • Media Type Selection: Valitse kaikki, screen, print tai speech -mediatyypit
  • Dimension Controls: Aseta vähimmäis- ja enimmäisleveys/korkeus millä tahansa CSS-yksiköllä (px, em, rem, vw, jne.)
  • Device Features: Määritä suuntautuminen, kuvasuhde, tarkkuus ja värimallin asetukset