Para el desarrollo de sitios web o páginas web con una determinada resolución, utilizamos consultas de medios que responden a CSS. Se ven algo como esto. Para cada resolución, mencionamos el ancho mínimo y máximo de la pantalla para la que funciona nuestro CSS. Esto hace que nuestras páginas web sean receptivas, es decir, visibles en cualquier dispositivo. El contenido se ajusta automáticamente según lo deseado cuando se cambia la resolución.
Puede utilizar estas consultas de medios para que sus páginas web respondan. La sintaxis predeterminada de CSS para la consulta de medios es, por ejemplo: si quiero hacer mi sitio web entre 320 px y 768 px. Usaré estas consultas de medios:
@media screen (ancho mínimo: 320 px) y (ancho máximo: 768 px) {
- ¿Qué lenguajes de programación debo aprender para desarrollar sitios web y aplicaciones? ¿Y en qué orden? Gracias.
- ¿Qué tipo de matemática necesito en la programación de JavaScript para usarla en mi sitio web?
- ¿Cuál es el tema de WordPress adecuado para un sitio de aprendizaje de inglés?
- ¿Qué opinas sobre esta hoja de estilo de reinicio? http://html5doctor.com/html-5-reset-stylesheet/
- Cómo aprender el desarrollo front-end hoy sin ser abrumado
/ * Dentro pon todo el estilo para cada elemento individualmente * /
}
Bootstrap ya ofrece clases receptivas para dispositivos. Para obtener más información, puede consultar este CSS · Bootstrap
Probablemente esté en un dispositivo que tenga una resolución máxima de 1366. En este caso, puede usar las herramientas de desarrollo de su navegador para cambiar a la vista 1920 para mejorar su experiencia de desarrollo.
Aquí enumero las consultas de los medios para diferentes resoluciones, la última (para 1920px) podría resolver su respuesta. Simplemente use esa consulta de medios para diseñar su contenido. Y el sitio web se verá perfecto con una resolución de 1920.
Sugiero que use herramientas de desarrollo del navegador para una vista receptiva para obtener una vista previa de cómo se ve su página web en cualquier resolución.
Espero que ayude 🙂
/ * Consultas de medios receptivos * /
/ * Para dispositivos pequeños (<= 320px) * /
@media screen y (ancho máximo: 320px) {
}
/ * Para dispositivos pequeños (
@media screen (ancho mínimo: 321 px) y (ancho máximo: 767 px) {
}
/ * Para dispositivos pequeños Tabletas (> = 768px) * /
@media screen (ancho mínimo: 768px) y (ancho máximo: 991px) {
}
/ * Para dispositivos medianos Escritorios (> = 992px) * /
@media screen (ancho mínimo: 992px) y (ancho máximo: 1199px) {
}
/ * Para dispositivos de escritorio grandes (> = 1200px) * /
@media screen (ancho mínimo: 1200px) y (ancho máximo: 1366px) {
}
/ * Para la resolución 1367 y superior * /
@media screen (ancho mínimo: 1367px) y (ancho máximo: 1919px) {
}
/ * Para resolución 1920 y superior * /
@media screen (ancho mínimo: 1920px) y (ancho máximo: 4000px) {
}
