CSS : Media Queries

Para hacer la prueba con los diferentes tamaños de dispositivos pero recuerda toma como referencia ViewPort

ViewPort 

El viewport es la ventana gráfica o área visible en la pantalla de un dispositivo, ya sea un ordenador, un teléfono móvil o una tablet.

Es el tamaño que tomara la web en el dispositivo. 

My screen

Es el tamano real del dispositivo

Como saber la resolución de mi pantalla en mi celular Android

Ya entendido lo aclarado anteriormente, vamos a verificar ambas informaciones descargando la App llamada CPU Z  o la App  Aida

Luego de descargada e instalada dicha aplicación la ejecutas y te aparecerán muchas opciones, que cada una te muestra una serie de información, en este caso vamos donde dice «Device» y nos mostrará lo siguiente:

En este caso lo que nos interesa es el Screen Resolution, lo cual es la resolución de la pantalla y donde dice Screen Size lo cual es el tamaño físico de la pantalla en pulgadas.

<meta name="viewport" content="width=device-width, initial-scale=1" />

/* ===== Móvil S ====*/	
@media only screen and (width: 320px) {
}

/* ===== Móvil M ====*/	
@media only screen and (width: 375px) {
}

/* ===== Móvil L ====*/	
@media only screen and (width: 425px) {
}

/* ===== Tablet ====*/	
@media only screen and (width: 768px) {
}

/* ===== Portatil====*/	
@media only screen and (width: 1024px) {
}

/* ===== Portatil====*/	
@media only screen and (width: 1440px) {
}

Simulador de dispositivos móviles

Podrás ver como queda tu web en los teléfonos y tablets más usados

http://www.responsinator.com/

Referencia

https://developer.chrome.com/docs/devtools/device-mode/

https://www.youtube.com/watch?v=XxVgkJW90AI&list=PLn7_xweWjVMzF7XwxoGQoYgqpff4nmJ74&index=1