Como hacer responsive una página web con CSS
Mucho antes de la llegada de los dispositivos móviles, las paginas o sitios web eran creadas para ser vistas a través de un ordenador, y por lo tanto su diseño era pensado en el mismo, por lo cual, no era de extrañar que su contenido fuera más rígido y las medidas web fueran fijas. Sin embargo, con el pasar del tiempo, a medida que la demanda de estos dispositivos fue aumentando y con ello el auge de las paginas online, se hizo necesario hacer un cambio en esto, y hacer paginas responsives.
Antes que nada, si eres nuevo en esto, seguramente te estarás preguntando a que hacen referencia estos términos. Si este es tu caso, permítenos contarte de que trata todo esto, y para que sea más fácil tu compresión y no quede ninguna duda, primero te explicaremos que es una página responsive, y luego que es CSS, así que vamos por partes…
¿Qué es una página web responsive?
Primero que todo, “responsive” es una palabra que se utiliza para referirnos a “responsive design” que en español significa “diseño web adaptable”, lo anterior en palabras sencillas quiere decir que tomaremos una página web y le haremos ciertas modificaciones para que esta sea más accesible a los usuarios y pueda adaptarse a cualquier clase de dispositivo, tales como ordenadores, tablets, iPads, smartphones y todos los que se te ocurran.
Por otro lado, CSS son las siglas que hacen referencia a “Cascading Style Sheets”, lo que en español se traduce como “hojas de estilo en cascada” y básicamente es un lenguaje de programación que se utiliza frecuentemente en la estructura y composición de los sitios web.
Entonces, básicamente, un sitio web responsive es aquel que sin importar cuál sea el dispositivo que estés utilizando, este sitio tiene la capacidad de adaptar de forma automática el contenido que posee, a los distintos tamaños y medidas de los demás dispositivos, logrando ser visualizado por el usuario de forma correcta en todo tipo de pantallas.
Si ya cuentas con un sitio online, y lo que quieres es saber si este tiene un CSS responsive, puedes hacer uso de emuladores online en el buscador de Google y verificarlo. Sin embargo, al final del post te dejamos una lista de opciones para comprobar web responsives.
¿Cómo se configura correctamente un responsive?
Ahora que ya sabes el significado de cada término, es hora de avanzar al siguiente nivel y al tema por el cual llegaste hasta aquí: ¿Cómo convertir una página web en responsive? Para esto existen una serie de técnicas que te pueden ayudar a lograr este objetivo, y todo haciendo uso de CSS, así que si ya tienes conocimientos básicos en este lenguaje, realizar estos trucos será muy sencillo para ti.
➤ 1. Viewport en la etiqueta de Metatag:
Cuando hablamos de “viewport” nos referimos a la región grafica de un sitio web que es visualizada justo en el momento en que un usuario entra a dicha página, aquí se refleja el contenido del documento HTML. En general, hay varios sistemas, pero el más recomendable por su practicidad es el @media. Para este caso, lo que hacemos es incluir todas las reglas o condiciones que necesitemos en un solo documento CSS, cuyos estilos se incluirán dentro de llaves.
Si ves la etiqueta del sistema Metatag de @media, veras que luce de la siguiente forma:
En la parte de content = ” ” podemos agregar una infinidad de valores separados por comas (,) entre sí, sin embargo, dentro de todas esas posibilidades existen ciertos valores que son frecuentemente utilizados.
En esta sección te dejamos un resumen de los códigos para hacer responsive una página web y que te ayudaran para lo que te explicaremos a continuación:
Con la tabla de códigos anteriores, podrás solucionar el responsive de una página web, veamos cómo funciona…
Por ejemplo, supongamos que ya tenemos nuestra página y la hoja de CSS y queremos establecer una regla o condición con base al tamaño de la pantalla. Podemos decir, que siempre que nuestra pantalla tenga un tamaño menor a 320px de ancho, el navegador realice determinados estilos CSS prediseñados por nosotros con anterioridad, así que tendríamos lo siguiente:
Este proceso lo podemos repetir jugando con cada uno de los códigos de la tabla anterior, y así poder solucionar responsive de una página web con CSS.
➤ 2. Uso de operadores para CSS Media Queries
Por otro lado, los Media Queries, (que en español se traducen como “consultas de medios” ) nos ofrecen algunos operadores lógicos que podemos utilizar combinando unos con otros para crear un Media Query más avanzado de acuerdo a las medidas de una página web que necesitemos conseguir o cualquier otra cosa que sea necesaria.
And
Usaremos este operador para establecer varias condiciones en una sola. En el siguiente ejemplo definimos que nuestra pantalla solo se efectuará si tiene una medida de ancho igual o mayor de 560 pixeles, y si la pantalla esta en orientación horizontal.
Not
Emplearemos este vector cuando deseemos negar una condición, es decir, que solo si esa situación no se cumple es que se harán efectivas las Media Queries. En el caso de abajo solo se efectuaran los estilos CSS siempre que el dispositivo no sea monocromo.
Or
Se usa para establecer múltiples condiciones separadas a través de comas, donde sí al menos una de ellas se cumple se hará efectivo la Media Query. Por ejemplo, en el código de abajo vemos un Media Query útil para pantallas de 700px y dispositivos handheld que se encuentren en posición horizontal.
Only
se utiliza para hacer efectiva la orden solo si se cumplen determinadas condiciones. En el ejemplo inferior se puede ver que en nuestra pantalla únicamente si el ancho de la pantalla es menor a 800 px, el color del fondo es amarillo.
¿Cómo usar las media Queries para tipos de pantallas?
A través de los Media Queries se puede hacer modificaciones en tu app o en la ventana de tu contenido, para transformarlo en un sitio adaptable que encaje entre las medidas específicas de cualquier medio tecnológico. Para convertir tu web para varios responsives, solo debes hacer uso de los siguientes códigos.
- Dispositivos móviles en general (landscapes y portrait): Aplica para la mayoría de teléfonos celulares, como smartphones, que este en posición vertical u horizontal. La resolución para este caso es de 320 px a 479 px
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
- Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
¿Cómo podemos ver las pantallas de los responsives?
Actualmente, estamos en plena era de la tecnología, y tenemos a nuestra disposición un sinfín de herramientas que podemos utilizar a nuestro favor, en este caso para verificar que cumplen con un diseño adaptable y solucionar errores de responsive en la web. Para que logres eso, te presentamos las siguientes opciones:
➤ 1. Extensiones de Google
Puedes hacer uso de las extensiones de Google Chrome a tu favor para simular las distintas medidas de los dispositivos y ver si adapta o no, y lo mejor es que es bastante fácil.
- Responsive Viewer: A través de esta extensión puedes observar distintas visualizaciones para lograr que tu página online sea responsive. Únicamente debes instalarla y probar que tal.
URL ➞ https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
- Mobile View Switcher: Esta es otras herramientas para desarrolladores que funciona como complemento y te permite mirar tu contenido desde un dispositivo móvil, y lo mejor es que puedes modificar la vista desde las opciones.
URL ➞ https://chrome.google.com/webstore/detail/mobile-view-switcher/bmhfelbhbkeoldaiphchjibggnoodpcj
➤ 2. Inspector Google Chrome:
Para poner a prueba tu sitio web con esta técnica, solo basta con tener descargado el navegador de Google Chrome. Una vez lo tengas instalado, lo que harás es presionar el clic derecho sobre tu página web, o sobre cualquier otra para la cual quieras saber si cumple con un diseño adaptable. Luego de esto, se abrirá un cuadro aparte donde deberás dar clic en el recuadro que dice “inspeccionar elemento”, y seguido de esto veras un pequeño icono de un teléfono móvil que también deberás presionar. A partir de aquí podrás ver una pantalla, y decidir desde que dispositivo deseas visualizar dicha página, y de esa forma tan sencilla puedes comprobar si cumple o no con tus expectativas de adaptación.
