Scribd
Cargar
15 vistas14 páginas

Diseño Responsive con Bootstrap y CSS

El diseño responsive se basa en una estructura flexible con anchuras porcentuales y reglas CSS como media queries. Las media queries sobreescriben estilos cuando se dan condiciones como un ancho de ventana específico. Esto permite que el diseño se adapte a diferentes tamaños de pantalla. Las imágenes también deben adaptarse con max-width: 100%.

Cargado por

Juan Manuel Henao Bermúdez
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
15 vistas14 páginas

Diseño Responsive con Bootstrap y CSS

El diseño responsive se basa en una estructura flexible con anchuras porcentuales y reglas CSS como media queries. Las media queries sobreescriben estilos cuando se dan condiciones como un ancho de ventana específico. Esto permite que el diseño se adapte a diferentes tamaños de pantalla. Las imágenes también deben adaptarse con max-width: 100%.

Cargado por

Juan Manuel Henao Bermúdez
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Web

RESPONSIVE
El diseño responsive se
basa en una estructura
flexible, basada en
porcentajes, y en unas
reglas especiales de CSS
que se llaman media
queries.
Las técnicas del
diseño responsive Columna Principal Columna Secundaria
están basadas en Width: 60%; Witht= 40%;
anchuras
porcentuales en
vez de absolutas
Que las imágenes
se adapten a su
contenedor con la
regla:

img{max- width: 100%;}


Media queries
Reglas sobreescriben a otras existentes cuando se da
una condición en parGcular, normalmente relacionada
con la anchura de la ventana del navegador.

@media screen and (propiedad: valor){


selector{
propiedad: valor;
}
}
@media screen and (min-width: valor){ }
Media query relacionada con la anchura mínima de la ventana del navegador.
Afecta a esa anchura y mayores.

@media screen and (max-width: valor){ }


Media query relacionada con la anchura máxima de la ventana del navegador.
Afecta a esa anchura y menores.

@media screen and (min-width:valor) and (max-width: valor){ }


Media query que solo afecta a un rango de tamaños de pantalla, comprendido
entre el valor mínimo y el valor máximo.
Además, necesito en el head
EGqueta meta que se añade a la eGqueta head,
necesaria para que un navegador móvil renderice una
página responsive correctamente.

<meta name="viewport"
content="iniBal-scale=1.0,
width=device-width">
EJERCICIO
<div id="principal">
<h1>Soy Principal</h1>
Creo dos div con <p>Contenido del párrafo</p>
id principal y <p>Contenido del párrafo</p>
secundario. </div>
Pongo en cada
uno de ellos
Gtulos y párrafos. <div id="secundario">
<h1>Soy Secundario</h1>
<p>Contenido del párrafo</p>
<p>Contenido del párrafo</p>
</div> </div>
body{
margin-leB: 10%;
margin-right: 10%
}

Creo esGlos div{


generales, para background-color: #F4E587;
body y paralos padding: 20px;
elementos div.
border-radius: 30px;
float: leB;
border: 5px solid white;
box-sizing: border-box;
}
#principal{
width: 60%;
}
Creo esGlos para
principal y para #secundario{
secundario.
width: 40%;
}
Agrego la
img{
eGqueta para las max-width: 100%;
imágenes.
height: auto;
}
@media screen and (max-
width: 600px){
#principal,
Agrego las Media #secundario{
queries
width: 100%;
float: none;
}
}

También podría gustarte