¿Cómo escribir CSS de manera que sea fácil hacer que una página responda? Como establecer altura, ancho, posición y tal

Si quieres hacerlo desde cero.

Divide tu página en sección. Encabezado / pie de página / cuerpo / barra lateral / barra de navegación / sección de video / sección de texto, etc. Identificando esta sección, haga que respondan con los kits de navegador css. Utilice al menos 4–5 kits de navegador estándar. Tomará muchos esfuerzos y codificación.

NOTA: Permítame hacerlo más fácil para usted, no tiene sentido reinventar la rueda. ¿Por qué no seleccionar un buen marco receptivo como bootstrap!

Cuando comencé a escribir código para un sitio web personal, solo estaba usando HTML y CSS. Sin embargo, con el tiempo encontré algunos problemas muy inquietantes, como la capacidad de respuesta. Por ejemplo, era demasiado difícil hacer un div para cambiar su ancho, alto, etc. al hacer clic.

Entonces, me di cuenta de que hay herramientas adicionales increíbles para hacer esas operaciones fácilmente. Como otros mencionaron, Boostrap es uno de ellos. Prefiero javascript para hacer trabajos sofisticados para mí.

Una cosa más, lo que sea que escribas para diseño web; tenga mucho cuidado con la sangría y la limpieza. El código que no puede leer es el código que no debe escribir 😉

Realmente depende de lo que buscas. ¿Querías una solución simple y rápida o un desafío? ¿Estás haciendo esto por aprender a construir un sitio web receptivo y llevar tus habilidades de CSS al siguiente nivel o solo quieres crear un sitio web rápido y receptivo?

Si su objetivo es breve y simple, Bootstrap, Foundation o WordPress son lo que necesita.

Si desea aprender y desafiarse a sí mismo, entonces debe buscar técnicas de diseño web receptivas. Esto incluirá la creación de consultas de medios y la adición de datos de viewport, y hará que su página responda. También puede hacer que el contenido de su página responda, como su texto, imágenes y video. No tiene sentido hacer que sus páginas web respondan mientras su contenido se sale de estas dimensiones.

Para comenzar, aquí hay un ejemplo de cómo puede agregar consultas de medios a su página y modificar la dimensión de la página de acuerdo con el tamaño de pantalla mínimo y máximo, y la orientación. Hay más ejemplos en este artículo sobre consultas de medios.

@media screen y (max-width: 680px), screen y (orientación: horizontal) y (max-width: 750px) {

}

Mucha gente ha recomendado utilizar el marco de Bootstrap y estoy de acuerdo en que será una solución simple, pero si desea dar el salto antes de utilizar un marco, hay algunos pasos para el proceso manual.

Viewport

Coloque esto en el encabezado de su documento HTML para permitir que el documento se escale en función del ancho del dispositivo. Esto es muy diferente de simplemente adoptar el tamaño del documento como se hace normalmente.

CSS

A continuación, tendrá que determinar cómo controlar los cambios de ancho del dispositivo a medida que las personas pasan de dispositivos más grandes a más pequeños y viceversa. Suponiendo que esto sea desde cero, deberá elegir si está comenzando desde un dispositivo móvil primero y trabajando hacia abajo o desde un escritorio primero y así sucesivamente.

Recomiendo trabajar primero con dispositivos móviles por el bien de la organización, pero eso es meramente preferencia y ambos funcionarán siempre y cuando se apegue a la configuración.

En sus hojas CSS, deberá pegar lo siguiente: ( nota: debe definir tantas consultas de medios diferentes como sea necesario para cumplir con todos los corchetes del dispositivo).

@Media solo pantalla y (min-device: [ancho]) {}

Pero, ¿cómo sabes qué tamaño es apropiado para dispositivos móviles y cómo explicas todas las variaciones que existen? La respuesta es que simplemente no puede movilizar su página para todos los dispositivos al orientar específicamente sus tamaños. Sin embargo, la siguiente mejor opción es abordar los dispositivos mediante estadios generales para el tamaño.

Bootstrap utiliza esto y, en general, puede funcionar bastante bien con entre 2 y 4 variaciones de tamaño diferentes. Consulte el siguiente enlace para tener una idea de algunos soportes de medios efectivos.

CSS · Bootstrap

Sin embargo, lo mejor que puede hacer es asegurarse de probar su sitio web en cada soporte y expandir el tamaño en función de lo que funciona mejor para su sitio web en esos tamaños.

El resto de sus esfuerzos de diseño deberían ser lo menos específicos posible sobre el tamaño de los elementos.

Espero que esto ayude.

Personalmente prefiero trabajar en el espacio de WordPress porque puedo usar fácilmente un marco que responde automáticamente una vez que establezco algunas reglas. Si no le interesa usar WordPress … como se menciona en varios de los comentarios antes del mío, bootstrap es el camino a seguir.

Dedique un mes a los “entresijos” de bootstrap y tendrá un buen punto de partida para familiarizarse cada vez más con este fantástico marco.

Recomendaría investigar un poco para tomar clases en línea para aprender aún más. ¡Le doy altos rangos a Udemy! He aprendido mucho de los instructores en este sitio y los “cursos” son muy asequibles ($ 10 – $ 50). Honestamente, en muchos sentidos, este método de estudio es más “vanguardista” que incluso muchas ofertas universitarias porque el tiempo de respuesta desde la creación hasta la implementación es muy corto ( es bueno tomar un curso y el año 2017 se menciona en el material ). Hágase un favor y asegúrese de que el curso y el instructor reciban altas calificaciones para asegurarse de recibir el valor deseado del plan de estudios.

Como muchos otros ya han mencionado si está buscando la solución más fácil de todas, simplemente use Bootstrap. Está construido con el mismo propósito de capacidad de respuesta.

Sin embargo, si desea construirlo por su cuenta, puede usar consultas de medios como lo sugiere Simon en una de las respuestas aquí.

Además, aunque dependerá de la forma en que estructura el div de su sitio web, algunos puntos para recordar son:

Use% (porcentaje) para anchos

Use auto para la mayor parte de la altura (excepto donde necesite una altura fija)

Si aprende el arte de usar consultas de medios, puede colocar los elementos donde quiera y de manera diferente en diferentes dispositivos según su deseo.

Solo juega con eso 🙂

Usa bootstrap. Es un marco web que es muy fácil de aprender, hará que sus páginas respondan y tiene muchas características excelentes para acelerar y embellecer su diseño web [1]

Notas al pie

[1] Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.

Necesita consultas de medios para esto.

Con las consultas de medios, puede crear estilos que solo se aplican cuando el tamaño de la pantalla es mayor o menor que un tamaño determinado.

Esto, por ejemplo, le daría al cuerpo un color de fondo negro solo en pantallas de hasta 767 px de ancho:

@media solo pantalla y (ancho máximo: 767px) {
cuerpo {
color de fondo: # 000;
}
}

Puede agregar esos estilos a sus archivos CSS normales.

Ese es un buen lugar para comenzar a involucrarse en todo:

Consultas de medios CSS y uso del espacio disponible | CSS-Tricks

Intente usar bootstrap en Bootstrap · El marco front-end más popular para dispositivos móviles y receptivo más popular del mundo.

Alternativamente, también puede obtener algunas plantillas prefabricadas bastante bonitas de https://w3layouts.com/

Mucha suerte 🙂

No he escrito CSS en mucho tiempo, pero puedo decirte cómo encontrar la respuesta que estás buscando.

Lookup Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo. y tienen un marco realmente bueno construido para esto.

Básicamente, hay dos líneas de CSS que debe usar.

Sé que uno tiene que ver con la ventana gráfica, ¡y no puedo recordar el otro!

¡Estoy seguro de que lo encontrarás!

–

Aclamaciones,

Ben

Bootstrap, lo ayudará a hacer que su página responda con código fuente escrito en CSS.

Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo

Use bootstrap o matertial js si realmente quiere hacerlo de manera rápida y eficiente. Atrás quedaron esos días tradicionales en los que el diseñador parece estar estilizando durante largos días.

Hay muchas técnicas, pero sugiero usar “%” no “píxel”

Obtenga conocimiento sobre mediaqueries.