Qual é a diferença entre tela e apenas tela nas consultas de mídia?
Esta posta.
O que distingue a “tela” da “Somente tela” em consultas de mídia?
““tela”É utilizado para definir o tamanho da tela dentro da consulta de mídia. Especificamente, o tamanho da tela pode ser definido usando “largura máxima" e "largura minPropriedades do CSS. O tamanho da tela difere de tela para tela. Portanto, a palavra -chave "única" é, portanto, determinada para impedir que os navegadores anteriores usem os estilos fornecidos, pois não lidam com consultas de mídia que contêm recursos de mídia.
Como utilizar as consultas de mídia "tela"?
Para utilizar o “tela”Em uma consulta de mídia, confira as instruções listadas.
Etapa 1: Insira um título
Primeiro, utilize a tag de cabeçalho HTML para adicionar um título dentro do documento HTML. Por exemplo, o “ Etapa 2: Adicione texto no parágrafo Em seguida, adicione texto no parágrafo com a ajuda do “ Aplique a regra @media Nós definimos a largura da tela. Saída Etapa 3: Aplicar o estilo no elemento "corpo" Acesse o elemento corporal e aplique as propriedades CSS para estilo: Para fazer isso, o “cor de fundo”A propriedade é utilizada para alocar uma cor na parte traseira do elemento. Etapa 4: defina “@media Screen” De acordo com nossos requisitos, definimos a largura de um documento como “300”Pixels ou menos. A cor de fundo é “LightskyBlues”. Caso contrário, será “verde”. Para fazer isso, utilize o “tela @media”E defina a largura máxima da tela. Depois disso, acesse o corpo e aplique as seguintes propriedades CSS: Aqui: Saída Como utilizar as consultas de mídia "apenas tela"? O "apenas”Palavra -chave restringe os navegadores de aplicar os estilos especificados que não são suportados por consultas de mídia com recursos de mídia. Siga as instruções para utilizar o “apenas tela”Nas consultas de mídia. Etapa 1: estilo "corpo" Acesse o corpo e aplique o “cor de fundo”Para especificar a cor na parte traseira do elemento na tela. Etapa 2: Aplique a consulta de mídia com "apenas tela" Agora, aplique uma consulta de mídia com “apenas tela”Para definir a largura da tela. Para isso, o valor do “apenas tela”A propriedade é definida como“400px”. Etapa 3: Defina a propriedade “Background-Color” Quando definimos a largura de um documento para “400”Pixels ou menos, a cor de fundo é“RGB (17, 97, 202)”. Caso contrário, é “RGB (235, 185, 23)”. Saída Isso é tudo sobre a distinção entre a tela de consultas de mídia e apenas a tela. Conclusão A distinção entre “apenas tela" e "tela”Nas consultas de mídia é que o“tela”É empregado para indicar o tamanho da tela da consulta de mídia. O "largura máxima" e "largura min”Pode ser usado para controlar o tamanho da tela. Como cada tela tem um tamanho de tela distinto, o “apenas”A palavra -chave é usada para evitar a implementação dos estilos especificados em navegadores anteriores que não permitem consultas de mídia. Este post explicou a distinção entre "apenas tela" e "tela" nas consultas de mídia.
Background-Color: verde;
corpo
Background-Color: LightskyBlues;
Cor: RGB (226, 12, 12);
Novamente, acesse o corpo e aplique “cor de fundo" de novo:
Background-Color: RGB (235, 185, 23);
@media apenas tela e (max-width: 400px)
corpo
Background-Color: RGB (17, 97, 202);