Si es lo primero, te recomendaría que fueses con un framework como Bootstrap como recomiendan en los comentarios. Si es lo segundo (como parece que lo es), aquí dejo un métododos posible soluciones:
Opción 1: Usando viewport
Utiliza laSi el objetivo son dispositivos móviles, podrías utilizar viewport
con un zoom y un ancho de página fijo. Así el contenido se vería igual en todos los dispositivos independientemente de su ancho (aunque seguramente habría diferencias en el alto):
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=1">
La propiedad zoomwidth
indica el tamaño del viewport y puede ser un valor numérico (sin unidades, en píxel) o un valor especial (p.e.: device-width
); initial-scale
indica el nivel de zoom inicial y luego puedes usar minimum-scale
y maximum-scale
para especificar el zoom mínimo y máximo respectivamente; y otra propiedad útil sería user-scalable=no
que previene que el usuario pueda aplicar zoom y es útil en apps web para móvil.
Opción 2: Usando zoom
con CSS y JavaScript
Utiliza la propiedad zoom
de CSS con el elemento body
, y actualízala dinámicamente con JavaScript cada vez que la ventana cambie de tamaño. El valor de zoom
va de 0 a 1, por lo que el valor que le debes asignar sería = ancho de ventana / ancho deseado de contenido.
Alternativamente, si el objetivo son dispositivos móviles, quizás podrías utilizar viewport
con un zoom y un ancho de página fijo. Así el contenido se vería igual en todos los dispositivos independientemente de su ancho (aunque seguramente habría diferencias en el alto):
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=1">