Ancho de página web dynamic

En estos días, las personas están usando varios tamaños de pantalla para ver sitios web. Necesito averiguar cómo configurar un ancho de página web dynamic que puede cambiar automáticamente con el tamaño de la pantalla. Creé un sitio web con 1200 píxeles de ancho. El sitio web y el contenido es demasiado grande para la pantalla de mi computadora portátil. Pero es más adecuado con mi otro monitor debido a que es grande en tamaño. ¿Puedo ajustar ese ancho para cambiar dinámicamente con el tamaño del monitor del usuario?

Puede usar consultas de medios CSS para esto. (Nota: las versiones anteriores de los navegadores no son compatibles)

Media Queries es un módulo CSS3 que permite que la representación de contenido se adapte a condiciones tales como la resolución de pantalla (por ejemplo, pantalla de teléfono inteligente frente a pantalla de computadora).

Más específicamente, verá lo siguiente:

  1. alto y ancho del dispositivo de alto y ancho del navegador

  2. orientación de resolución de pantalla del dispositivo (para teléfonos móviles y

    tabletas; retrato o paisaje)

CSS2 le permite especificar una hoja de estilo para un tipo de medio específico, como una pantalla o impresión. Ahora CSS3 lo hace aún más eficiente al agregar consultas de medios.

Puede agregar expresiones al tipo de medio para verificar ciertas condiciones y aplicar diferentes hojas de estilo. Por ejemplo, puede tener una hoja de estilo para pantallas grandes y una hoja de estilos diferente específicamente para dispositivos móviles.

Es bastante potente porque te permite adaptar a diferentes resoluciones y dispositivos sin cambiar el contenido.

Ejemplo :

El siguiente CSS se aplicará si el área de visualización es inferior a 600 px.

@media screen and (max-width: 600px) { .class { background: #ccc; } } 

Si desea vincular a una hoja de estilo separada, coloque la siguiente línea de código entre la etiqueta .

  

Múltiples consultas de medios :

Puede combinar múltiples consultas de medios. El siguiente código se aplicará si el área de visualización está entre 600px y 900px.

 @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } 

Ancho del dispositivo :

El siguiente código se aplicará si el ancho máximo del dispositivo es 480px (por ejemplo, pantalla de iPhone). Nota: max-device-width significa que la resolución real del dispositivo y el ancho máximo significa la resolución del área de visualización.

 @media screen and (max-device-width: 480px) { .class { background: #000; } } 

También este es un buen artículo para leer en hojas de estilo específicas de resolución sobre trucos de CSS