Como implementar consultas de mídia para dispositivos móveis

A consulta de mídia é um método de CSS (Cascade Style Sheet). Foi introduzido pela primeira vez em CSS3. É usado para incluir as propriedades CSS no site somente quando uma determinada condição for verdadeira. As consultas de mídia são colocadas dentro da seção CSS, seja ela inline ou um arquivo externo “ Estilo.css ”. A consulta de mídia refere-se a todos os tipos de mídia, incluindo “ todos ',' imprimir ',' tela ', e ' discurso ”. Para implementar consultas de mídia para dispositivos móveis, o “ tela ”O tipo será usado e o ponto de interrupção de “320px – 480px” Será criado.

Esta postagem mencionará as diretrizes necessárias para implementar consultas de mídia.

Como implementar consultas de mídia para dispositivos móveis?

A consulta de mídia pode ser aplicada a dispositivos móveis simplesmente mencionando o “ @meios de comunicação ”E especificando o tamanho da tela entre colchetes pequenos. O CSS para essa consulta de mídia pode então ser adicionado entre chaves. Sempre que o tamanho da tela atender ao tamanho especificado pelo usuário, será aplicada a consulta de mídia indicada.

Vejamos um exemplo prático para aprender a implementação de consultas de mídia para dispositivos móveis.

Exemplo: Crie um layout que muda de layout de duas colunas para layout de uma coluna aplicando consultas de mídia

No exemplo abaixo, o layout da página da web mudará de um layout de coluna para um layout de coluna única:

Etapa 1: crie uma estrutura HTML

Primeiro, crie um arquivo HTML e vincule o arquivo de folha de estilo CSS externo em seu seção.
Então, crie um seção e adicione o título do site usando o
marcação.
Criar uma
pelo nome da classe “container-class” e mais dois
dentro dele tem o nome da classe “ coluna ”.

< corpo >

< h1 > Dica Linux < / h1 >
< / cabeçalho>
< divisão aula = 'classe de contêiner' >
< divisão aula = 'coluna' >
< h2 > Seção Um < / h2 >
< p > Linux Hint é uma das melhores plataformas de e-learning. < / p >
< / divisão >
< divisão aula = 'coluna' >
< h2 > Seção Dois < / h2 >
< p > Linux Hint é uma das melhores plataformas de e-learning. < / p >
< / divisão >
< / divisão >
< / corpo >

Etapa 2: aplicar CSS
Na seção do corpo:

Primeiro, especifique a seção do corpo escrevendo “ corpo ”Tag e mencionando os aparelhos encaracolados.
Dentro das chaves, especifique a família da fonte, a cor de fundo, a margem e o preenchimento.

No seção:

Especifique a cor do texto, o alinhamento do texto, a cor de fundo e o preenchimento.

No “classe de contêiner” divisão:

Colocou o ' mostrar ”valor da propriedade para“ flexionar ”Para criar o Flexbox.
Use o ' justificar-conteúdo ”Para adicionar espaço entre o conteúdo e adicionar preenchimento.

Na classe de coluna:

Primeiro, especifique o valor declarado para “ flexionar ”Para adicionar um espaço entre as duas seções de layout.
Depois disso, adicione a cor de fundo, a borda, o preenchimento e o tamanho da caixa.

Etapa 3: aplicar consulta de mídia

Para aplicar consulta de mídia para dispositivos móveis, primeiro adicione o “ @meios de comunicação ' marcação.
Em seguida, especifique o valor “ 768px ”O que é típico para dispositivos móveis para o“ largura máxima ”Propriedade dentro dos pequenos colchetes.
Depois disso, especifique o “ coluna ”Valor para“ direção flexível ”propriedade que será aplicada ao“ classe de contêiner”. Isso transformará as duas colunas em uma coluna sempre que o tamanho de tela especificado for detectado.

Por último, aplique CSS no “ coluna ”classe e especifique“ margem ' e ' flexionar ”valores:

corpo {
família de fontes: sem serifa;
fundo- cor : prata;
margem: 0 ;
preenchimento: 0 ;
}

cabeçalho {
fundo- cor : #2f4f4f;
preenchimento: 20px;
texto- alinhar : Centro;
cor : branco;
}

.recipiente- aula {
exibição: flexível;
justificar- contente : espaço entre;
preenchimento: 20px;
}

.coluna {
flexível: 0 1 cálculo ( cinquenta % - 10px ) ;
fronteira : 1px verde sólido;
fundo- cor : branco;
dimensionamento de caixa: caixa de borda;
preenchimento: 20px;
}

@ meios de comunicação ( máximo- largura : 768px ) {
.recipiente- aula {
direção flexível: coluna;
}
.coluna {
flexível: 0 1 100 %;
margem inferior: 20px;
}
}

Saída
Aqui está o resultado da página da web após aplicar a consulta de mídia. Esta saída é um layout responsivo de duas colunas:

Sempre que a tela atende às dimensões especificadas usando uma consulta de mídia para dispositivos móveis, ela se transforma em um layout de uma coluna:

Conclusão

Para implementar consultas de mídia para dispositivos móveis, primeiro inclua o “ janela de exibição ' no ' cabeça ' seção. Em seguida, escreva CSS específico para design móvel. Depois disso, adicione a consulta de mídia usando a tag “@media” e especificando o tamanho da tela do celular. Por exemplo, especifique 768px para tablets e 480px para celulares. Este artigo explicou o procedimento para implementar consultas de mídia para dispositivos móveis.

Como implementar consultas de mídia para dispositivos móveis