CSS média lekérdezés generátor
CSS média lekérdezés blokkok generálása Bootstrap, Tailwind vagy egyéni breakpoints alapján mobilbarát vagy asztalbarát megközelítéssel.
CSS média lekérdezés generátor
Válassz egy breakpoint skálát, és ez az eszköz megírja az illő @media blokkokat számodra, készen az egy stíluslapba való beillesztésre. Válaszd a Bootstrap vagy Tailwind előbeállításokat, hogy újrahasznosítsd ezeknek a keretrendszereknek a breakpoints-eit, vagy válts Egyéni módra, és gépeld be a saját szélességeidet vesszővel vagy soremelkedéssel elválasztva — az olyan csupasz számok, mint a "480, 768, 1024" automatikusan elnevezésre kerülnek, vagy párosítsd a kettőt olyan címkékkel, mint a "tablet:768".
A mobilbarát kimenet az ascendens min-width-csak lekérdezésekkel kaszkádozik, ami az az alapminta, ahogy manapság a legtöbb komponens CSS-e íródik; az asztalbarát megközelítés a descendens max-width-csak lekérdezésekkel kaszkádozik, a legnagyobb breakpoint az első. Kapcsold be a tartományszintaxist, hogy minden breakpoint-ot mindkét oldalán korlátozz — az egyes blokkok akkor csak azon a szinten vonatkoznak, a legfelső szint nyitva marad felül. A szélességek px-ben, em-ben vagy rem-ben nyomódnak ki, feltételezve az általános 16px gyökér betűméret konverziót. Négy további kapcsoló hozzáadja az önálló lekérdezéseket az orientációhoz, a hover-képes mutatóhoz, a prefers-color-scheme-hez és a prefers-reduced-motion-hez, hasznos, ha egy oldal ezeket az ellenőrzéseket az elrendezési breakpoints mellett szükségeli. Válts az SCSS kimenetre, és minden blokk egy nevesített @mixin-ré válik @content helyett, így a Sass builded @include-et használhat bárhol, ahol a szabály szükséges.
Egy breakpoint lista, amely semmi használható megoldásra nem oldódik fel — üres, vagy minden bejegyzés nem-numerikus — világosan jelentésre kerül, ahelyett, hogy törött CSS-t produkálna; az ismétlődő szélességek egy blokkra esnek össze, megtartva azok első nevét. Nagyon hosszú egyéni listák korlátozódnak, így egy hatalmas vagy rosszul formázott érték beillesztése soha nem fagyasztja be a lapot.
Mindenki helyileg fut a böngészödben — semmi, amit begépelsz, nem töltődik fel sehova. Másold ki az eredményt, töltsd le .txt fájlként, vagy küldd közvetlenül egy másik eszköz bemenetébe, hogy folytasd a munkát rajta.