CSS Media Screen

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

iPad 1 and 2

768 x 1024

iPad 3

1536 x 2048

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%; }}