Gerador de Consultas CSS

Gerador de Consultas CSS

Construa CSS preciso @media regras para qualquer ponto de interrupção e combinação de recursos sem memorizar a sintaxe. Escolha um pré-definido do framework, escolha o tipo de consulta e ative os recursos de mídia adicionais que precisar — a ferramenta monta um bloco válido com tanto a sintaxe clássica quanto a moderna de intervalo.

Como usar

1. Escolha um Pré-definido do framework — Bootstrap 5, Tailwind CSS, Material Design ou Personalizado — depois escolha a largura do ponto de interrupção.
2. Escolha o Tipo de consulta: largura mínima (primeiro mobile), largura máxima (primeiro desktop) ou um intervalo entre duas larguras.
3. Selecione o Estilo de sintaxe: clássico min-width / max-width ou a nova sintaxe de consultas de mídia nível 4 (width >= ...).
4. Ative qualquer Características adicionais que desejar combinado com o ponto de interrupção: orientação, prefers-color-scheme, prefers-reduced-motion, hover ou pointer.
5. Copie o gerado @media arraste o bloco da panel de saída e coloque-o em seu estilo de folha.

Características

• Predefinições de framework – Ponto de interrupção de um clique para Bootstrap 5, Tailwind CSS e Material Design, mais um modo personalizado para qualquer valor em pixels.
• Três modos de consulta – Gerar primeiro mobile min-width, primeiro desktop max-widthou uma consulta precisa que almeja uma classe de dispositivo específica.
• Sintaxe clássica e moderna – Alternar entre regras tradicionais min-width/max-width e a sintaxe mais limpa de consultas de mídia nível 4 (width >= X).
• Recursos de mídia combinados – Colocar orientação, prefers-color-scheme, prefers-reduced-motion, capacidade de hover e precisão de pointer sobre qualquer consulta de largura.
• Atualizações em tempo real – A saída é regenerada conforme você altera as entradas, permitindo que você visualize instantaneamente diferentes combinações.
• Copiar & baixar – Pegue o CSS com um clique ou salve como um .css arquivo para seu projeto.