Pontos de interrupção nas consultas de mídia CSS | Explicado

As consultas de mídia CSS são chamadas de consultas que permitem alterar a aparência da estrutura da web, dependendo do tipo de dispositivo usando o site como desktops, telefones, laptops, etc., e provar -se útil no design de sites responsivos. Essas consultas são especificadas usando a regra @media e devem ser definidas em determinados pontos em que a modificação no layout da web é necessária. Esses pontos são chamados pontos de interrupção que discutimos em detalhes abaixo.

Introdução aos pontos de interrupção do CSS

Pontos de interrupção no CSS são chamados de pontos em que o layout de um site altera correspondente ao tamanho da tela do tipo de dispositivo. Esses pontos também são considerados pontos de interrupção da consulta de mídia porque são especificados em consultas de mídia.

Agora que aprendemos o que são pontos de interrupção da consulta de mídia, vamos explorar como defini -los.

Definir pontos de interrupção CSS

Não há padrão fornecido para definir um ponto de interrupção, portanto, pontos de interrupção definidos em várias estruturas da web podem diferir. No entanto, recebemos dois tipos de abordagens para definir um ponto de interrupção.

1. Pontos de interrupção do tipo de dispositivo

2. Pontos de interrupção do tipo de conteúdo

Vamos vê -los em detalhes.

Pontos de interrupção do tipo de dispositivo

Como o nome sugere, os pontos de interrupção do tipo de dispositivo consideram o procedimento de especificar pontos de interrupção com base em diferentes tipos de dispositivos. Embora isso possa não ser considerado uma boa abordagem, porque a tecnologia está evoluindo a cada minuto e novos dispositivos emergem de vez em quando. Portanto, toda vez que um novo dispositivo emerge os desenvolvedores precisam especificar um ponto de interrupção para aquele dispositivo em particular que pode ser agitado.

Além disso, a lista de consultas de mídia é enorme ao definir pontos de interrupção de acordo com o tipo de dispositivo. Diferentes dispositivos com base nos quais você pode decidir pontos de interrupção são os seguintes.

1. Desktops

2. Comprimidos

3. Celulares

Aqui apresentamos alguns exemplos de pontos de interrupção baseados em dispositivos.

Para iPhone 13

@Media Somente tela e (largura do dispositivo: 1170px) e (altura do dispositivo: 2532px)

..

Para Samsung Galaxy S9+

@Media Somente tela e (largura do dispositivo: 1440px) e (altura do dispositivo: 2960px)

..

Em vez de especificar pontos de interrupção de cada dispositivo separadamente, você também pode definir pontos de interrupção para grupos de dispositivos comuns.

/ * Para dispositivos muito pequenos (486px e abaixo) */
@media apenas tela e (max-width: 486px) …
/ * Para dispositivos pequenos (596px e acima) */
@media apenas tela e (largura min: 596px) …
/ * Para dispositivos médios (720px e acima) */
@media apenas tela e (largura min: 720px) …
/ * Para dispositivos grandes (995px e acima) */
@media apenas tela e (largura min: 995px) …
/ * Para dispositivos extras grandes (1100px e acima) */
@media apenas tela e (largura min: 1100px) …

Pontos de interrupção do tipo de conteúdo

Especificando pontos de interrupção com base no tipo de conteúdo que seu site exibe, os pontos de interrupção do tipo de conteúdo são usados. Isso é considerado uma boa abordagem, porque essa abordagem exige que você especifique pontos de interrupção apenas nos pontos em que o conteúdo precisa de qualquer tipo de reajuste. Usando essa abordagem, o número de consultas de mídia se torna cada vez mais gerenciável.

Alguns pontos de interrupção do tipo de conteúdo de amostra são fornecidos abaixo.

Para largura de tela 720px e maior.

@Media Somente tela e (largura min: 720px)

..

Para resolução de tela entre 480px e 720px.

@Media Somente tela e (Min-lar: 480px) e (Max-Width: 720px)

..

Usando pontos de interrupção MIN e Max-Width nos lugares certos

Nos exemplos acima, você deve ter notado que usamos dois tipos de pontos de interrupção que são minúsculos e largura máxima e max-lar. Uma pergunta deve surgir em sua mente que se use quando.

A resposta a esta pergunta é simples: se você estiver desenvolvendo seu site para dispositivos menores primeiro, defina seus pontos de interrupção CSS padrão com largura de min de largura e ajuste para dispositivos maiores de acordo. Enquanto isso, o oposto é o caso de dispositivos maiores. Se você estiver desenvolvendo para dispositivos maiores primeiro, use a largura máxima e depois sintonize dispositivos menores de acordo.

Tipos de pontos de interrupção usados

Quando o mercado do tipo de dispositivo não era tão enorme quanto agora, a largura da tela para cada dispositivo foi especificada separadamente, no entanto, essa abordagem não é recomendada agora, pois há uma vasta gama de tipos de dispositivos no mercado.

A abordagem preferida é que você deve estar ciente do tipo de seu design, seu público -alvo e o tipo de dispositivos que seu público usa principalmente e a largura da tela desses dispositivos. Aqui alistamos alguns pontos de interrupção frequentes usados.

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

Conclusão

Pontos de interrupção no CSS são chamados de pontos em que o layout de um site altera correspondente ao tamanho da tela do tipo de dispositivo. Existem dois tipos de pontos de interrupção, um que são especificados com base no tipo de dispositivo e o outro são definidos com base no tipo de conteúdo. A abordagem usando o tipo de conteúdo é preferida sobre o tipo de dispositivo, pois há uma enorme variedade de dispositivos disponíveis no mercado e fica difícil especificar pontos de interrupção para cada dispositivo individualmente. Embora existam certos pontos de interrupção comuns usados ​​para vários dispositivos que discutimos em detalhes nesta redação, juntamente com outros detalhes sobre pontos de interrupção.