Min-lar e largura máxima em consultas de mídia | Explicado

Um site responsivo é referido como um site dinâmico que altera sua estrutura de acordo com o dispositivo em que está sendo exibido. Pode mudar seu comportamento, dependendo da largura da tela, resolução da tela, orientação etc. do dispositivo. Agora, para fazer esse site, os desenvolvedores usam consultas de mídia. Aqui neste artigo, os assuntos discutidos são os seguintes.

1. Consulta de mídia
2. CSS Breakpoints
3. Largura min
4. Largura máxima
5. Combinando ambos
6. Quando usar qual: largura min-lar

Consulta de mídia

As consultas de mídia foram introduzidas no CSS versão 3, que permite que seus usuários criem sites responsivos através do uso da regra @media. Esta regra exige que você indique o tipo de mídia, como impressão, tela, fala ou todos, juntamente com algumas expressões lógicas que especificam certos recursos de mídia como largura, resolução, densidade, etc.

Essas consultas permitem basicamente a alteração do layout da web, dependendo do tipo de dispositivo, como desktop, laptop, celular, etc. Aqui mostramos como definir uma consulta de mídia.

Sintaxe

@Media Screen e (Min-Width: 420px) e (Max-Width: 650px)
@regra
tipo de mídia
recurso de mídia
recurso de mídia
operador
operador

Uma consulta de mídia sempre começa com a regra @media e exige que você especifique o tipo de mídia no qual a consulta deve ser aplicada. Então você precisa declarar o tipo de mídia de tela e usar operadores como 'e' para combinar recursos de mídia, como largura de minúscula ou max-largura.

As consultas de mídia são especificadas em determinados pontos que são chamados de pontos de interrupção de consulta de mídia. Veja a próxima seção para aprendê -los em detalhes.

CSS Breakpoints

Pontos de interrupção no CSS são chamados de pontos nos quais a estrutura de um site muda correspondente ao tamanho da tela do tipo de dispositivo. Os pontos de interrupção são decididos com base no tipo de dispositivo ou no tipo de conteúdo. Alguns pontos de interrupção comuns são os seguintes.

1. Para dispositivos móveis: 320px a 480px
2. Para tablets e iPads: 481px a 768px
3. Para laptops: 769px a 1024px
4. Para desktops: 1025px a 1200px

Ao ler as explicações acima, você deve ter notado que usamos dois recursos de mídia de largura e largura. Você deve estar se perguntando o que são estes e quando usá -los. Abaixo, demos -lhe todos os detalhes essenciais.

Largura min

O recurso de mídia de largura da min de largura especifica a largura mínima de um dispositivo específico. Por exemplo, na seção acima, alistamos algumas larguras da tela com base no tipo de dispositivo, como a largura mínima da tela de dispositivos móveis, é 320px.

Exemplo

@Media Screen e (Min-Width: 600px)
P
Size da fonte: 16px;

No código acima, especificamos que, quando a largura mínima da tela é 600px ou mais larga, o tamanho da fonte do parágrafo mudará para 16px. Portanto, qualquer dispositivo com a largura da tela exibirá o texto do parágrafo no tamanho da fonte especificado.

Largura máxima

O recurso de mídia em largura máxima indica a largura máxima de um dispositivo específico. Por exemplo, a largura máxima da tela de dispositivos móveis é 480px. Consulte o exemplo abaixo para entendê -lo de uma maneira melhor.

Exemplo

@media tela e (max-width: 700px)
P
Size da fonte: 25px;

O código acima afirma que quando a largura máxima da tela é 700px ou menor, o tamanho da fonte do parágrafo será alterado para 25px. Qualquer dispositivo que renderize esta largura da tela exibirá o texto do parágrafo no tamanho da fonte especificado.

Combinando ambos

Você também pode usar os dois recursos da mídia, combinando -os com o operador 'e'.

Exemplo

P
estilo de fonte: negrito;

@Media Screen e (Min-Width: 600px) e (Max-Width: 700px)
P
estilo de fonte: itálico;

O código acima especifica que, se a largura da tela estiver entre 600px e 700px, o estilo da fonte será itálico, caso contrário, o estilo da fonte será ousado.

Quando usar qual: largura min-lar

Se você estiver projetando seu site para dispositivos menores primeiro, defina seus pontos de interrupção CSS padrão com a largura da minia e ajuste para dispositivos maiores de acordo.

Enquanto isso, se você estiver projetando para dispositivos maiores primeiro, use a largura máxima e depois sintonize dispositivos menores de acordo.

Conclusão

A largura de minima. A largura da min de largura especifica a largura mínima da tela de um dispositivo específico;. Se você está projetando seu site para dispositivos menores primeiro, defina seus pontos de interrupção iniciais com largura de min, enquanto que se você estiver projetando para dispositivos maiores primeiro, use max-largura. Esta posta.