Articles of responsive design

Rejilla Bootstrap 3 de Twitter, cambio de punto de corte y eliminación de relleno

Intento moverme a la nueva grilla Boostrap 3 y estoy enfrentando algunas dificultades. ¿Cómo hacer que la grilla se acumule por debajo de 480px, pero no entre 480px y 768px? por encima de 768px el relleno a la izquierda del primero y el relleno a la derecha están fuera del contenedor, pero debajo de 768px […]

¿Cómo usar Twitter Bootstrap 3 para sitios que no responden?

Como puede leer en su página, el nuevo Bootstrap 3 es “móvil primero”: Con Bootstrap 2, agregamos estilos amigables para dispositivos móviles opcionales para aspectos clave del marco. Con Bootstrap 3, hemos rescrito el proyecto para que sea amigable para dispositivos móviles desde el principio . En lugar de agregar estilos móviles opcionales, están integrados […]

Mantener la relación de aspecto de div según la altura

Necesito mantener el ancho de un elemento como un porcentaje de su altura . Entonces, a medida que la altura cambia, el ancho se actualiza. Lo contrario se puede lograr utilizando un valor de% para el relleno de la parte superior, pero el relleno de la izquierda como un porcentaje será un porcentaje del ancho […]

¿Cómo hacer que un elemento se expanda o contraiga a su contenedor principal?

El objective es que el elemento se expanda al tamaño de su contenedor principal, en este caso un , sin importar cuán grande o pequeño sea ese contenedor. El código: svg, #container{ height: 100%; width: 100%; } La solución más común a este problema parece ser establecer el atributo viewBox en el elemento . viewBox=”0 […]

Imagen de fondo sensible a pantalla completa

Soy muy nuevo en Front-end development and Foundation. Intento que sea ​​una imagen de pantalla completa que se ajusta de manera responsable. ¿Alguien puede decirme qué estoy haciendo mal? Está escalando correctamente, pero no muestra la imagen completa. También quería que sentara sobre él en un dispositivo móvil, ¿es posible? El HTML: BleepBleeps A family […]

cambiar el tamaño de la fuente de acuerdo con el tamaño div

He hecho este jsfiddle el html: header not a lot of text here but still overflowing con css: html, body { height: 100%; width: 100%; } #launchmain { width: 55%; display: inline-block; position: relative; top:10%; left:25%; } #launchmain:after { padding-top: 79.26%; display: block; content: ”; margin-top: 10px; } #box1 { border: 1px solid #000000; position: […]

Tabla de respuesta bootstrap 3 con primera columna fija

Me estoy enfocando específicamente en dispositivos móviles, así que tengo una tabla responsiva de Bootstrap. Es solo un div con la clase bootstrap “table-responsive” y una tabla anidada dentro con las clases “table table-striped table-table-table-hover table-condensed”. ¿Hay alguna manera fácil de asegurarse de que la primera columna esté fija (sin desplazarse horizontalmente)? En los dispositivos […]

Redimensionar automáticamente las imágenes con el tamaño del navegador usando CSS

Quiero que todas (o solo algunas) de mis imágenes cambien de tamaño automáticamente cuando cambie el tamaño de la ventana de mi navegador. He encontrado el siguiente código, aunque no hace nada. HTML CSS body { font-family: Arial; font-size: 11px; color: #ffffff; background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed; background-size: cover; } #icons { position: […]

Mantener la relación de aspecto de acuerdo con el ancho y la altura

Es posible ajustar y centrar un div cuadrado en la ventana gráfica y mantener siempre su relación de aspecto de acuerdo con el ancho y la altura . Requisitos: solo CSS el tamaño del cuadrado debe adaptarse a la dimensión más pequeña (ancho o alto) de la ventana gráfica, independientemente de la orientación (horizontal o […]

Consultas de medios comunes de CSS Puntos de interrupción

Estoy trabajando en un sitio web receptivo con CSS Media Queries. ¿Es la siguiente una buena organización para dispositivos? Teléfono, Ipad (paisaje y retrato), computadora de escritorio y computadora portátil, pantalla grande ¿Cuáles son los valores de punto de interrupción de consultas de medios comunes? Estoy planeando usar los siguientes puntos de interrupción: 320: Retrato […]