CSS Media Queries

Media queries de CSS

Saludos el día hoy les traigo una breve explicación de lo que son los media queries y porque son tan importantes a la hora de hacer que tu pagina web sea adaptable a cualquier dispositivo, existen diversas herramientas para realizar pruebas y darse cuenta como sera el aspecto en cada dispositivo... ya sean tablets, smartphones, pc de escritorio y laptops, cada uno cuenta con una resolución diferente según el tamaño de su display, este esta regido por el numero de pixeles que puede mostrar, esta es quizás una de las razones mas importantes de la creación de media queries.

a continuación les dejo un vídeo que explica como son y para que usan y  un ejemplo de código CSS.

Ejemplo:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

El código anterior esta definido para cambiar la clase "container". según el ancho de la pantalla del dispositivo en el que se esta mirando.

nos vemos en mi próxima entrada que hablara de los selectores y atributos de CSS y de que manera controlar cada uno de los elementos de tu pagina.