59 - CSS media queries



Problema:

En CSS3 disponemos una propiedad llamada "column-count" que nos permite definir la cantidad de columnas que se debe mostrar un texto contenido en un "div".

Definir una serie de media queries para que se muestre una sola columna si el ancho del dispositivo es menor a 768px, 2 columnas si es menor a 1200px y 3 columnas en caso de ser mayor o igual a 1200 píxeles.

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <div class="container">
    <h2>Curso de programación</h2>
    <p>El curso está ideado para ser desarrollado por una persona que no conoce nada de programación y se utilice Java como primer lenguaje.</p>
    <p>El objetivo fundamental de este tutorial es permitir que el estudiante pueda resolver problemas de distinta índole (matemáticos, administrativos, gráficos, contables etc.) empleando como herramienta la computadora.</p>
    <p>Hay que tener en cuenta que para llegar a ser programador se debe recorrer un largo camino donde cada tema es fundamental para conceptos futuros. Es importante no dejar temas sin entender y relacionar.</p>
    <p>La programación a diferencia de otras materias como podría ser la historia requiere un estudio metódico y ordenado (en historia se puede estudiar la edad media sin tener grandes conocimientos de la edad antigua)</p>
    <p>La programación es una actividad nueva para el estudiante, no hay en los estudios primarios y secundarios una materia parecida.</p>
    <p>Es bueno tenerse paciencia cuando los problemas no se resuelven por completo, pero es de fundamental importancia dedicar tiempo al análisis individual de los problemas.</p>
    <h2>Qué es un programa</h2>
    <p><strong>Programa</strong>: Conjunto de instrucciones que entiende un ordenador para realizar una actividad.<br>
       Todo programa tiene un objetivo bien definido: un procesador de texto es un programa que permite cargar, modificar e imprimir textos, un programa de ajedrez permite jugar al ajedrez contra el ordenador u otro contrincante humano.<br>
       La actividad fundamental del programador es resolver problemas empleando el ordenador como herramienta fundamental.</p>
    <p>Para la resolución de un problema hay que plantear un algoritmo.</p>
    <p><strong>Algoritmo</strong>: Son los pasos a seguir para resolver un problema.</p>
    <h2>Diagrama de flujo</h2>
    <p>Un diagrama de flujo es la representación gráfica de un ALGORITMO.</p>
  </div>
</body>
</html>
.container {
  width:90%;
  margin:0 auto;
  background-color:#ccc;  
  column-count:1;
  text-align: justify;
  padding:1rem;
}

@media (min-width: 768px) {
  .container {
    column-count:2;	  
    max-width:720px;
    font-size:1.20rem;	
  }
}


@media (min-width: 1200px) {
  .container {
    column-count:3;	  	  
    max-width:1140px;
    font-size:1.40rem;
  }
}
Ver solución


Retornar