CSS @Media Screen / polegadas x centímetros x pixel
Nos últimos meses, eu andei testando o CSS com o @media screen, e ao olhar o site em celulares, monitores e notebooks de tamanhos diferentes de polegadas, sempre aparecia algo precisando ser reajustado na visão esquerda ou direita do video, então pensei, e achei melhor ver o tamanho em polegada, comparando com o tamanho em centímetros, e comparando com o tamanho em pixel.
| iPhone | 320 x 480 | device-pixel-ratio = 2 |
| iPhone 4 | 640 x 960 | device-pixel-ratio = 2 |
| iPhone 5, 5s | 640 x 1136 | device-pixel-ratio = 2 |
| Samsung Galaxy S I and II | 480 x 800 |
| Samsung Galaxy S III | 720 x 1280 |
| iPhone 6 | 750 x 1334 | device-pixel-ratio = 2 |
| iPhone 6 plus | 1242 x 2208 | device-pixel-ratio = 3 |
| Amazon Kindle Fire | 1024 x 600 |
Ao que parece, para funcionar direito o @media screen, será preciso:
1) criar uma página CSS só para visão pelo celular de 5", 6" e 6,5" polegadas
celular de 5 inch = 480px
celular de 6 inch = 576px
celular de 6,5 inch 16,5 = 624px
/* mobile = Extra small devices (phones, 576px and down) */
/* styles for mobile browsers smaller than 480px; (iPhone) */
@media screen and (min-device-width:480px) and (max-device-width:624px) and (orientation:portrait)
{ body { font-size: x-small; max-width: 100%; min-height: 10%; }}
2) criar uma página só para visão pelo tablet de 7" e 8" e 10" polegadas
tablet de 7 inch = 672px
tablet de 8 inch = 768px
tablet de 10 inch = 960px
/* #Tablets = IPAD devices / landscape 768px and up) */
/* different techniques for iPad screening / For portrait layouts only */
@media screen and (min-device-width: 672px) and (max-device-width: 960px) and (orientation:portrait)
{ body { font-size: small; max-width: 100%; min-height: 10%; }}
3) criar uma página só para visão pelo notebook de 10", 12" 14" e 15" polegadas
notebook de 12 inch = 1152px
notebook de 14 inch = 1344px
notebook de 15 inch = 1440px
/* #Laptop = Laptops devices /styles for browsers larger than 960px; */
@media screen and (min-width: 1152px) and (max-width: 1440px) and (orientation:landscape)
{ body { font-size: normal; width: 100%; height: 100%; }}
4) criar uma página só para visão pelos monitores de 15", 16", 17", 18", 19", 20", 21", 22" e 23" polegadas
monitor de 15 inch = 1440px
monitor de 16 inch = 1536px
monitor de 17 inch = 1632px
monitor de 18 inch = 1728px
monitor de 19 inch = 1824px
monitor de 20 inch = 1920px
monitor de 21 inch = 2016px
monitor de 22 inch = 2112px
monitor de 23 inch = 2208px
/* styles for browsers larger than 1440px; */
@media screen and (min-width: 1440px) and (max-width: 2208px) and (orientation:landscape)
{ body { font-size: medium; width: 100%; height: 100%; }}
4) criar uma página só para visão pelos monitores gamer de 24", 25", 26", 27", 28", 29", 32" e 42" polegadas
monitor gamer de 24 inch = 2304px
monitor gamer de 25 inch = 2400px
monitor gamer de 26 inch = 2496px
monitor gamer de 27 inch = 2592px
monitor gamer de 28 inch = 2688px
monitor gamer de 29 inch = 2784px
monitor gamer de 32 inch = 3072px
monitor gamer de 42 inch = 4032px
/* styles for browsers larger than 2208px; */
@media screen and (min-width: 2304px) and (max-width: 4032px) and (orientation:landscape)
{ body { font-size: large; width: 100%; height: 100%; }}
