html - query - responsive design ejemplos

¿Cómo ajustar automáticamente el tamaño de div para todos los formatos de pantalla de dispositivos móviles/tabletas?

Question

He diseñado una página donde hay cuatro etiquetas div en la página. Si pruebo la página en un teléfono móvil (5 pulgadas), se ajusta perfectamente a la página. Si pruebo la misma página en la tableta, la página encaja en el 30% de la pantalla. Entonces, ¿cómo puedo configurar el tamaño de div para que se ajuste a todo tipo de pantallas?

Enlace violín

HTML:

  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

Cualquier sugerencia por favor,

Answer 1

Fiddle

¿Desea establecer la altura que puede establecer para todos los dispositivos?

Decidir sobre el diseño del sitio, es decir, Altura en varios dispositivos.

Ex:

• Height-100px para burbujas en dispositivo con -min-width: 700px .
• Height-50px < 700px para burbujas en el dispositivo con < 700px ;

Tenga su css que tiene altura 50px;

y agregar esta consulta de medios

  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

Esto hará que sus burbujas tengan una altura de 100 px en dispositivos mayores de 700 px y un margen de 20 px;

Answer 2

Esto se llama Responsive Web Development (RWD) . Para hacer que la página responda a todos los dispositivos, necesitamos usar algunos conceptos básicos básicos como:

1. Coloca la metaetiqueta de la ventana gráfica en la cabeza:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

2.Utilizar consultas de medios .

Ejemplo:-

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3. O podemos usar directamente el framework RWD :

• Bootstrap
• Fundación 3 etc.

Algunos de buenos artículos

Consultas de medios para dispositivos estándar - POR CHRIS COYIER

Dimensiones de los medios CSS

4. Consultas de medios de dispositivos más grandes, dispositivos medianos y dispositivos pequeños. ( Trabajar en mis escenarios. )

Debajo de las consultas de medios para el tipo de dispositivo genérico: - Dispositivo más grande, dispositivos medianos y dispositivos pequeños. Estos son solo tipos de medios básicos que funcionan para todos los escenarios y que el código es fácil de manejar, en lugar de utilizar varias consultas de medios, solo hay que cuidar de tres tipos de medios.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

Answer 3

Intenta dar a tus divs un ancho del 100% .

Answer 4

Mientras buscaba mi respuesta para la misma pregunta, encontré esto:

<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">

Puede usarlo dentro de una etiqueta (iframe o img) que la imagen se ajustará en función de su dispositivo.

Answer 5

No tengo mucho tiempo y tu jsfidle no funcionó en este momento.
Pero tal vez esto te ayude a comenzar.

En primer lugar, debes evitar poner css en tus etiquetas html. Like align="center" .
Ponga cosas así en su css ya que es mucho más claro y no se desaprueba tan rápido.

Si desea diseñar diseños con capacidad de respuesta, debe utilizar consultas de medios que se introdujeron en css3 y que estén bien soportadas hasta ahora.

Ejemplo css:

@media screen and (min-width: 100px) and (max-width: 199px)
{
    .button
    {
        width: 25px;
    }
}

@media screen and (min-width: 200px) and (max-width: 299px)
{
    .button
    {
        width: 50px;
    }
}

Puede utilizar cualquier css que desee dentro de una consulta de medios.
http://www.w3.org/TR/css3-mediaqueries/

Answer 6

Puedes usar la altura de la ventana height:100vh; , solo establece la altura de tu div a la height:100vh; , esto establecerá la altura de su div a la altura de la ventana gráfica del dispositivo; además, si desea que sea exactamente como la pantalla de su dispositivo, establezca el margen y el relleno en 0.

Además, será una buena idea establecer la metaetiqueta de la ventana gráfica:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

Tenga en cuenta que esto es relativamente nuevo y no es compatible con IE8; consulte la lista de asistencia antes de considerar este enfoque ( http://caniuse.com/#search=viewport ).

Espero que esto ayude.

Answer 7

Sencillo:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" / >

¡Aclamaciones!

Answer 8

Tu pregunta no está muy clara de lo que quieres, pero a juzgar por tus comentarios, asumo que quieres que cada burbuja cubra la pantalla, tanto vertical como horizontalmente. En ese caso, la parte vertical es la parte difícil.

Como han respondido muchos otros, primero debe asegurarse de que está configurando la metaetiqueta de la ventana gráfica para que los dispositivos móviles utilicen su ventana gráfica "ideal" en lugar de la ventana emulada de "ancho de escritorio". La versión más fácil y más infalible de esta etiqueta es la siguiente:

<meta name="viewport" content="width=device-width, initial-scale=1">

Fuente: PPK, probablemente el principal experto en cómo funciona esto. (Consulte http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf ).

Básicamente, lo anterior garantiza que las consultas de medios y las mediciones de CSS se correspondan con la visualización ideal de un "punto" virtual en cualquier dispositivo dado, en lugar de reducir las páginas para trabajar con diseños de escritorio no optimizados. No es necesario que entiendas los detalles, pero es importante.

Ahora que tenemos una ventana móvil correcta (no falsificada) con la que trabajar, ajustarnos a la altura de la ventana gráfica sigue siendo un tema difícil. Generalmente, las páginas web están bien para expandirse verticalmente, pero no horizontalmente. Entonces, cuando establece la height: 100% en algo, esa medida tiene que relacionarse con otra cosa. En el nivel superior, este es el tamaño del elemento HTML. Pero cuando el elemento HTML es más alto que la pantalla (y se expande para contener el contenido), sus mediciones en porcentajes se verán afectadas.

Ingrese la unidad vh : funciona como porcentajes, pero funciona en relación con la ventana gráfica, no con el bloque contenedor. Página de información de MDN aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Usar esa unidad funciona como lo esperabas:

.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

Funciona en muchos navegadores (IE9 y superiores, Firefox moderno, Safari, Chrome, Opera, etc.) pero no en todos (información de soporte aquí: http://caniuse.com/#search=vh ). La desventaja en los navegadores donde funciona es que hay un error masivo en iOS6-7 que hace que esta técnica sea inutilizable para este caso (detalles aquí: https://github.com/scottjehl/Device-Bugs/issues/36 ). Aunque se arreglará en iOS8.

Dependiendo de la estructura HTML de su proyecto, puede utilizar el uso de height: 100% en cada elemento que se supone que es tan alto como la pantalla, siempre que se cumplan las siguientes condiciones:

1. El elemento es un elemento hijo directo de <body> .
2. Tanto los elementos html como los del body tienen un conjunto de 100% de altura.

He usado esa técnica en el pasado, pero fue hace mucho tiempo y no estoy seguro de que funcione en la mayoría de los dispositivos móviles. Pruébalo y verás.

La siguiente opción es usar un asistente de JavaScript para cambiar el tamaño de sus elementos para que se ajusten a la ventana gráfica. Ya sea un relleno de vh que vh problemas de vh o algo completamente distinto. Lamentablemente, no todos los diseños son factibles en CSS.

Answer 9

Yo uso algo como esto en mi documento.

var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device

$("#container").width(width+"px");
$("#container").height(height+"px");