Consulta de Mídia | Tutorial de CSS | #04 | #uninerds | Universo dos Nerds

Channel:

Universe of Nerds

Subscribers:

2,410

Published on December 13, 2017 2:00:01 PM ● Video Link: https://www.youtube.com/watch?v=9eMgdo80zmA

Game:

Counter-Strike: Source (2004)

Category:

Tutorial

Duration: 16:57

73 views

5

Mais informações:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-css

Cores em CSS:
https://youtu.be/Ex8lL_jesJ4

Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds

Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4

Faça parte de um grupo focado em Tecnologia: https://www.facebook.com/groups/DevAt

Hashtags: #uninerds #css

Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331

Contato: uninerds@uninerds.net

Com o avanço da tecnologia cada vez mais dispositivos que tem acesso a Internet são criados, mas como cada um tem suas características não tem como criar um único estilo que seja atendido por todos, também tem a questão de se querer aplicar estilos diferentes para eles, como por exemplo o estilo aplicado para a tela não funciona muito bem para impressão

Por isso foi criado o Media Query, com ele embora não sabemos por qual tipo de dispositivo o usuário irá acessar nossa página e muito menos suas características podemos definir estilos diferentes para dispositivos e características diferentes

Exsitem duas formas de utilizar este recurso, uma é por colocar o atributo media na tag link ou por dentro do código CSS iniciar com @media

Em ambos os casos podemos definir o dispositivo para o qual queremos aplicar determinado estilo, temos as seguintes opções:

- aural para sintetizador de voz
- braille para dispositivos de braile
- embossed para impressoras de braile
- handheld para dispositivos portáteis
- print para impressão
- porjection para projetores
- screen para tela
- tty para teletipos
- tv para TV
- all para todos os dispositivos

Além dos dispositivos também é possível definir para características diferentes

Uma característica que serve apenas para tv é a scan que serve para verificar o metódo de verificação da tela da TV e pode receber dois valores progressive para progressivo ou interlace para intercalado

As outras caracterísitcas que temos são:

- grid verifica se a saída do dispositivo é grade em que tem apenas um tipo de letra o valor é 1 e bitmap o valor será 0
- orientation verifica a orientação do dispositivo e pode ser portrait para retrato e landscape para paisagem

As próximas características aceitam o prefixo min- para definir o valor mínimo e max- para definir o valor máximo ou somente a própria característica com o valor fixo

- width verifica a largura
- height verifica a altura
- device-width verifica a largura do dispositivo
- device-height verifica a altura do dispositivo
- aspect-ratio verifica a relação largura e altura o valor é dois positivos separados por "/"
- device-aspect-ratio verifica a relação largura e altura do dispositivo
- color verifica a quantidade de bits por cor
- color-index verifica o número de cores
- monochrome verifica o número de bits por pixel em dispositivo monocromático
- resolution verifica a densidade dos pixels, o valor pode ser verificado por dpi que é polegada ou por dpcm que é por centímetro

A característica deve ter a seguinte estrutura (característica:valor)

Os operadores lógicos em Media Query são and para "e", , para "ou" e not para negação

Other Statistics