Construye diseños adaptativos sin consultas de medios

Sep 12, 2025

Cómo

Durante mucho tiempo, estaba tratando de alcanzar una composición visual perfecta en las páginas web. He estado teniendo mucho dolor con los puntos de interrupción de CSS en mi trabajo diario y nunca estuve bastante satisfecho con las formas comunes de manejar el diseño sensible. Recientemente, descubrí un muy genial. diseño web adaptable Truco que hace que todo sea simple, consistente y lógico, y estoy ansioso por compartirlo con usted.

Este artículo es principalmente sobre el desarrollo creativo, por lo que es para ambos: los desarrolladores delanteros que pueden encontrar esta técnica útil y diseñadores web que deben tener una comprensión general de la producción web y cómo mejorar la producción final. Supongo que ya sabe sobre CSS, puntos de interrupción y consultas de medios.

Construye un blog con cuadrícula y FlexBox.

[dieciséis] La forma tradicional

Adaptive layouts: breakpoints — Los puntos de interrupción pueden llevar a resultados insatisfactorios para viewports no estándar

Los dispositivos portátiles están asumiendo el mundo. Una variedad de todo tipo de dispositivos están cambiando la forma en que creamos sitios web. Por 'un sitio web receptivo', la mayoría de las personas asumen solo versiones de escritorio y móvil (a veces escritorio, tableta, móvil). Así es como funciona tradicionalmente:

 H1 {
Tamaño de fuente: 80px;
}
.envase {
Ancho: 980px;
Margen: 0 Auto;
}

@media (max-ancho: 1023px) {
h1 {
Tamaño de fuente: 48px;
}
.envase {
Ancho: Auto;
relleno: 0 30px;
}
}

De hecho, generalmente el Diseño de sitio web Estamos viendo que no está hecho para nuestro dispositivo. Por ejemplo, veamos cómo ajustamos el tamaño de fuente de & lt; H1 & GT; título:

Adaptive layouts — Con solo un punto de interrupción, puede terminar con tamaños de puntos de aspecto raro

Ya ves, nuestro & lt; H1 & GT; El título tiene "Tamaño de fuente: 48PX" en un dispositivo de ancho de 320px y 800px, y "Tamaño de fuente: 80PX" en 1024px y 2560px.

Por supuesto, podemos agregar más puntos de interrupción, ¡pero el número de dispositivos diferentes es innumerable! Esto va a hacer especificaciones de diseño muy complicadas y confusas, porque es difícil saber qué valor se aplica a qué pantalla.

Adaptive layouts: font size — Nunca puede crear suficientes puntos de interrupción para obtener el tamaño de la fuente perfecto en cada pantalla

Lo que realmente necesitamos es esto:

[dieciséis] Unidades de visor

Adaptive layouts: viewpoint units — Las unidades de visualización mejoran las cosas, pero todavía necesitan trabajo.

La solución a este problema involucra a las unidades de visualización VW y VH. Estas son unidades de longitud que representan 1/100 de la anchura / altura de la ventana gráfica (ampliamente compatibles con los navegadores de IE9 +).

Podemos usarlos para ajustar las propiedades de una página web de acuerdo con su tamaño. La situación se pondrá un poco mejor, pero el dolor sigue siendo el mismo:

 H1 {
Tamaño de fuente: Calc ((80/1920) * 100VW;
}
.envase {
Ancho: 80VW;
Margen: 0 Auto;
}

@media (max-ancho: 1023px) {
h1 {
Tamaño de fuente: Calc ((48/375) * 100VW;
}
.envase {
Ancho: 90VW;
}
}

Nunca sabemos si es demasiado grande o demasiado pequeño.

¿Cómo podemos construir un sistema de diseño verdadero-adaptable? ¿Cómo diseñamos un sitio web receptivo que funciona de forma nativa de 320px a 2560px?

Idealmente, su maqueta debe explicar la lógica detrás del diseño, y cómo se adapta de una resolución más pequeña a más grande:

[dieciséis] La solución

Adaptive layouts: solution — Aquí es cómo hacer un sistema de diseño verdaderamente adaptable.

Queremos ajustar continuamente las propiedades de una pequeña pantalla a una grande. No hay puntos de interrupción ni consultas de medios. Lo que queremos es un solo valor que funciona para cada pantalla.

Una función de matemáticas con dos variables es la clave. Por ejemplo, si queremos ajustar un tamaño de fuente de título, la función debe verse así:

1920x + y = 80
375x + y = 48

1920 - Ancho de escritorio predeterminado en una maqueta de diseño (es igual a 100VW)
375 - Ancho móvil predeterminado en una maqueta de diseño (es igual a 100VW)
80 - Tamaño de fuente de título H1 deseado en el escritorio
48 - Tamaño de fuente de título H1 deseado en el móvil

Estos son los valores X e Y:

x = (80 - 48) / (1920 - 375)
x = 0.0207

y = 80 - 1920 * 0.0207
y = 40.256

Para usar estos valores, necesitaremos la función CSS CALT para realizar cálculos en la página web (ampliamente compatibles con los navegadores de IE9 +). Deberíamos contar x * 100 veces (debido a la unidad 1VW = 1/100 de ancho de la vista).

Tomamos nuestra función original:
1920x + y = 80
375x + y = 48

Reemplazar 1920 con 100VW:
100VW * x + y = valor deseado

Reemplace X e Y con los valores:
100VW * 0.0207 + 40.256 = valor deseado

Obtenemos el estilo CSS final:

 H1 {Tamaño de fuente: Calc (2.07VW + 40.25px)}

Sorprendentemente, que finalmente funciona como queríamos!

Sólo una propiedad para todas las pantallas. No hay necesidad de sobrescribir los valores una y otra vez. Puede ajustar y calcular cualquier tipo de propiedades: ancho, tamaño de fuente, relleno, margen, etc.

Intentemos construir un diseño real usando esta técnica:

Pero este enfoque tiene una desventaja: es difícil entender qué valor se encuentra detrás de esta función de calc. ¿Cómo podemos simplificarlo?

Si está codificando HTML diariamente, probablemente esté familiarizado con los procesadores de SASS / SCSS. Aquí hay un poco de ayuda para usted: hagamos una "mezcla" y hagamos que todos estos cálculos sucedan automáticamente, y aún así, mantenga nuestros valores originales.

Es la misma función como se describe anteriormente, pero se hizo como una mezcla de SASS:

 $ Amplio: 1920
$ Pantalla-estrecha: 375

@Mixin Fluid ($ Propiedad, $ MinValue, $ MAXVALUE)
  $ X: ($ MAXVALUE - $ MINVALUE) / ($ Pantalla de ancho - $ Pantalla-estrecha)
  $ y: $ maxvalue - $ pantalla de pantalla * $ x
  # {$ propiedad}: calc (# {100 * $ x} vw + # {$ y} px)

H1
  @Include Fluid ('talla de fuente', 48,80)

.envase
  @Include Fluid ('Ancho', 315.1580)
@Include Fluid ('Padding', 30,60)

Adaptive layouts: mixin — Una mezcla de SASS puede facilitar todo el proceso.

Esta tecnica Proporciona una solución muy sofisticada para finalmente construir diseños web verdaderamente sensibles. Admite la mayoría de los navegadores, asegura que su proyecto que se muestra correctamente a un visitante, simplifica la estructura de su estilos, y lo más importante es que su diseño web sea consistente y lógico. Espero que pueda ayudarte a lanzar algunos proyectos web asombrosos.

Artículos relacionados:

17 Tutoriales de diseño web receptivos realmente útiles
Las reglas de la tipografía web sensible.
Crear un diseño sensible con la cuadrícula CSS

Construye diseños adaptativos sin consultas de medios

Cómo - Artículos más populares

Cómo preparar un archivo para imprimir

Comprenda la tubería de importación de activos de Unity

Agregue animaciones de UI a su sitio

Cómo montar su obra

Crea conjuntos de iconos de productos en ilustrador

Cómo prototipo Una aplicación móvil con origami Studio

Cómo hacer explosiones masivas con V-Ray

Cómo transmitir sonido en una pintura

Categorías