En este artículo, aprenderemos sobre el diseño receptivo Pure.CSS. Es una colección de módulos CSS receptivos que se pueden incluir en cualquier aplicación web para crear sitios web más rápidos, hermosos y receptivos. En palabras simples, es un marco de CSS que se utiliza para crear un sitio web hermoso y receptivo en menos tiempo. Pure CSS es un marco CSS desarrollado por yahoo. Tiene seis módulos llamados base, grid, formularios, botones, tablas y menús.
Características de Pure.CSS:
- Es una forma más rápida y fácil para el desarrollo web.
- Es una colección de herramientas gratuita y de código abierto.
- Crea páginas web independientes de la plataforma.
- Es fácil de aprender y usar.
- Tiene un diseño Responsive incorporado tanto para páginas web como para dispositivos móviles.
Diseño de respuesta:
Responsive significa responder y diseño web significa diseñar un sitio web. El diseño receptivo es un enfoque que simplemente redistribuye, ajusta, reposiciona, redimensiona el contenido general y las imágenes de acuerdo con el ancho del navegador o el tamaño de la pantalla. En palabras simples, los diseños receptivos están diseñados para acceder a ellos en todos los dispositivos, independientemente del tamaño de la pantalla del dispositivo. anchos de dispositivos que computadoras de escritorio portátiles tabletas El diseño receptivo es la característica integrada de Pure.CSS. Tiene una cuadrícula fluida interna de 12 columnas para dispositivos móviles que admite diseños receptivos para pantallas de tamaño pequeño, grande y mediano.
ocupan los 3/4 de la pantalla, entonces debemos incluir la clase ‘pure-u-3-4’ en ese div específico.
Llave |
Nombre de la clase |
Consulta de medios CSS |
Aplica |
|---|---|---|---|
| ninguna | .puro-u-* | ninguna |
siempre |
| SM | .puro-u-sm-* | @pantalla multimedia y (ancho mínimo: 35,5 em) |
≥ 568px |
| Maryland | .puro-u-md-* | @pantalla multimedia y (ancho mínimo: 48em) |
≥ 768px |
| lg | .puro-u-lg-* | @pantalla multimedia y (ancho mínimo: 64em) |
≥ 1024px |
| SG | .puro-u-xl-* | @pantalla multimedia y (ancho mínimo: 80em) |
≥ 1280px |
Para generar la consulta de medios predeterminada, se usa ‘em’ en lugar de ‘px’ para que las consultas de medios respondan al zoom de la página web en consecuencia.
Ejemplo: este ejemplo describe el uso de Pure CSS para diseñar la página receptiva para diferentes anchos de dispositivo.
HTML
<html>
<head>
<title> pure.css </title>
<meta name="viewport"
content="width=device-width, initial-scale = 1">
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
<style>
body {
text-align: center;
}
.pure-u-1-1 {
border: 5px solid green;
}
.pure-u-1-3 {
background-color: aqua;
}
.pure-u-1-2 {
background-color: blue;
}
.pure-u-1-1 {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">
<p> First columns of the pure.css ||</p>
</div>
<div class="pure-u-1-2">
<p> Second columns of the pure.css || </p>
</div>
<div class="pure-u-1-1">
<p> GeeksforGeeks </p>
</div>
<div class="pure-u-1-1">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Salida: a partir de la salida a continuación, podemos ver que para diferentes tamaños de ventana, el contenido no se ve afectado, ya que se establece en un ancho de dispositivo específico.
Configuración de los diferentes anchos de dispositivo
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA