Preguntas etiquetadas con responsive-design

Actualmente tengo algo como: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> Ahora, suponiendo que fueran contentcajas de diferente altura, con el mismo ancho, ¿cómo podría mantener el mismo "diseño basado en cuadrícula" y aún tener todas …

88 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

Desde Bootstrap 3, ya no hay archivos separados para hojas de estilo estándar y receptivas. Entonces, ¿cómo puedo eliminar fácilmente las funciones de respuesta?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

Descargué el ejemplo de Twitter Bootstrap y creé un proyecto de rieles simple con él. Copié el CSS donde es necesario y se muestra bien. También copié el js y todo funciona muy bien en mi escritorio: reorganiza la página cuando cambio el tamaño de mi navegador. Cuando se utilizan …

84 twitter-bootstrap  responsive-design 

Con las consultas de medios CSS, puede utilizar max-device-widthpara orientar el ancho de un dispositivo (como un dispositivo iPhone o Android) y / o un max-widthancho de página. Si usa max-device-width, cuando cambia el tamaño de la ventana del navegador en su escritorio, el CSS no cambiará, porque su escritorio …

81 css  responsive-design  media-queries 

Sería bueno envolver estilos css para diferentes resoluciones dentro de algunas clases css usando less. Me gustaría hacer algo como: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } Al final, algo como esto debería ser el resultado: …

81 css  responsive-design  less  media-queries 

He estado tratando de ver qué srcsetimagen está usando mi navegador a través de las herramientas de desarrollo de navegadores, pero aparte de usar la pestaña de red para ver qué imagen obtiene, no puedo decirlo. Usar la pestaña de red normalmente estaría bien, pero a veces he notado que …

81 html  css  responsive-design  developer-tools  srcset 

Últimamente, he estado diseñando sitios que son más receptivos y he estado usando consultas de medios CSS con frecuencia. Un patrón que noté es que el orden en el que se definen las consultas de medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Existe una …

80 css  media-queries  responsive-design 

¿Cómo hacer que un iframe responda, sin asumir una relación de aspecto? Por ejemplo, el contenido puede tener cualquier ancho o alto, lo cual es desconocido antes de la representación. Tenga en cuenta que puede usar Javascript. Ejemplo: <div id="iframe-container"> <iframe/> </div> Dimensione esto iframe-containerpara que el contenido apenas encaje …

14 javascript  html  css  iframe  responsive-design 

Tengo algunos problemas reales al intentar que mi barra lateral / contenido de navegación (usando Bootstrap) se muestre (se expanda) de forma predeterminada en el escritorio y se cierre de forma predeterminada en el móvil y que el icono se muestre solo en el móvil. Parece que no puedo hacer …

9 javascript  html  css  bootstrap-4  responsive-design