Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

Responsive Web Design - Rejilla-View


¿Qué es una cuadrícula-View?

Muchas páginas web se basan en una rejilla-view, lo que significa que la página se divide en columnas:


El uso de una rejilla-vista es muy útil en el diseño de páginas web. Esto hace que sea más fácil para colocar elementos de la página.


Una cuadrícula de vista sensible a menudo tiene 12 columnas, y tiene una anchura total de 100%, y se encogerá y expandirse a medida que cambia el tamaño de la ventana del navegador.

Sensible cuadrícula


La construcción de una red de respuesta-View

Vamos a empezar la construcción de una red de visión sensible.

En primer lugar asegurarse de que todos los elementos HTML tienen el box-sizing propiedad establecida en border-box . Esto asegura que el relleno y el borde están incluidas en el ancho total y la altura de los elementos.

Agregue el código siguiente en el código CSS:

* {
    box-sizing: border-box;
}

Lea más sobre el box-sizing propiedad en nuestra CSS3 caja de medición capítulo.

El siguiente ejemplo muestra una sencilla página web adaptable, con dos columnas:

Ejemplo

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}
Inténtalo tú mismo "

El ejemplo anterior está muy bien si la página web sólo contiene dos columnas.

Sin embargo, queremos utilizar una rejilla visión sensible, con 12 columnas, para tener un mayor control sobre la página web.

En primer lugar debemos calcular el porcentaje de una columna: 100% / 12 columnas = 8,33%.

Después hacemos una clase para cada una de las 12 columnas, class="col-" y un número que define el número de columnas de la sección debe abarcar:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Inténtalo tú mismo "

Todas estas columnas deben estar flotando a la izquierda, y tienen un acolchado de 15 píxeles:

CSS:

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

Cada fila debe ser envuelto en un <div> . El número de columnas dentro de una fila siempre debe agregar hasta 12:

HTML:

<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>

Las columnas dentro de una fila están flotando a la izquierda, y por lo tanto se sacan del flujo de la página, y otros elementos serán colocados como si no existen las columnas. Para evitar esto, vamos a añadir un estilo que despeja el flujo:

CSS:

.row::after {
    content: "";
    clear: both;
    display: block;
}

También queremos añadir algunos estilos y colores para que se vea mejor:

Ejemplo

html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
Inténtalo tú mismo "

Observe que la página web en el ejemplo no se ve bien cuando se cambia el tamaño de la ventana del navegador a una anchura muy pequeña. En el siguiente capítulo aprenderá cómo arreglar eso.