¿Cuál es la forma más rápida de aprender cómo hacer que un sitio sea receptivo? ¿Existe un software que pueda ayudar a resolver esto en unos minutos?

Todos los elementos HTML pueden ser considerados como cuadros. En CSS, el término “modelo de caja” se usa cuando se habla de diseño y diseño.
El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Se compone de: márgenes, bordes, relleno y el contenido real.
La siguiente imagen ilustra el modelo de caja:

Explicación de las diferentes partes:

Contenido : el contenido del cuadro, donde aparecen el texto y las imágenes.
Relleno : limpia un área alrededor del contenido. El relleno es transparente.
Borde : un borde que recorre el relleno y el contenido.
Margen : limpia un área fuera del borde. El margen es transparente

El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.

Anchura y altura de un elemento
Para establecer correctamente el ancho y la altura de un elemento en todos los navegadores, necesita saber cómo funciona el modelo de caja.
Supongamos que queremos diseñar un elemento

para que tenga un ancho total de 350 px:

div {
ancho: 320px;
relleno: 10px;
borde: 5px gris sólido;
margen: 0;
}

Aquí está la matemática:
320px (ancho)
+ 20px (izquierda + derecha)
+ 10px (borde izquierdo + derecho)
+ 0px (margen izquierdo + derecho)
= 350px

El ancho total de un elemento debe calcularse así:
Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho

La altura total de un elemento debe calcularse así:
Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior

Es importante obtener el ancho y alto real de la etiqueta html que desea que sea sensible

Fórmula de diseño web sensible

(objetivo / contexto) x 100 = resultado%

Considere la siguiente maqueta, comencemos a convertir eso a CSS, para crear una grilla fluida sensible.

estilo de envoltura
[código]
#envoltura{
margen: 0 auto;
ancho: 960px; / * 900/960 * /
}
[/código]

estilo contenedor
[código]
#envase{
margen: 0 auto;
ancho: 93,75%; / * 900/960 * /
}
[/código]

estilo principal
[código]
#principal{
flotador izquierdo;
ancho: 72.22222%; / * 650/900 * /
}
[/código]

estilo lateral
[código]
#lado{
flotar derecho;
ancho: 23.8888%; / * 215/900 * /
}
[/código]

así que% es la clave

Para texto

Entrar en el em
Un em es una unidad de medida. Al igual que los píxeles, ems puede determinar el tamaño de los elementos en una página web. A diferencia de los píxeles, que son absolutos, los ems son relativos al tamaño de fuente de sus padres, que es donde hay mucha confusión.
1em es igual al tamaño de fuente heredado.
Si el tamaño de fuente de un

se establece en 16px, 1em dentro de ese

es equivalente a 16px. Si el tamaño de fuente de ese

cambia a 20px, 1em dentro de ese

es equivalente a 20px.

Un em es generalmente un toque más grande que la forma de la letra, pero entiendes la idea.

Conversión de píxeles

Valor de px deseado / valor de px heredado = valor de em

Vista en cuadrícula

Muchas páginas web se basan en una vista de cuadrícula, lo que significa que la página se divide en columnas:

Usar una vista de cuadrícula es muy útil cuando se diseñan páginas web. Facilita la colocación de elementos en la página.

Una vista de cuadrícula receptiva a menudo tiene 12 columnas y tiene un ancho total del 100%, y se reducirá y expandirá a medida que cambie el tamaño de la ventana del navegador.

Bueno, aquí hay una buena introducción a la vista de cuadrícula:
Diseño Web Responsivo Grid

Bueno, esto era lo básico … hay mucho más que eso, como la consulta multimedia,
viewport, css frameworks, js frameworks, especificación w3c, etc.

Creditos
Modelo de caja CSS
Fórmula de diseño web sensible
Tomando el “Erm ..” de Ems – Artículo de Envato Tuts + Web Design

sitios web para comenzar
Hacer un sitio web // recomendado
Aprende a codificar HTML avanzado y CSS
Tutorial de Diseño Web Responsivo – Code School // curso premium
Guía para principiantes sobre diseño web receptivo – Treehouse Blog
// curso premium