1

Estoy realizando una web y viendo los cambios con Chrome. He terminado de maquetar la web y todo el contenido al cambiar a una resolución (1366X768) se descoloca y muchos elementos no ocupan el 100% de la caja. Me refiero a que me da la sensación que la vista por defecto del Chrome "estira" todos los elementos pero cuando cambio la resolución se descoloca todo siendo una resolución mayor.

Mi pregunta es ¿cómo puedo maquetar la página en una resolución concreta?

Pego el código:

.menu-navegacion {
  position: fixed;
  width: 22%;
  height: 400px;

  margin-top: 200px;
  margin-left: 3%;
  z-index: 10;

  font-size: 1rem;
  font-family: 'Monserrat', Arial, sans-serif;
  font-weight: bold;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
}


@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }


@media screen and (max-width: 480px) {
  .menu-navegacion  {
  font-size: 2rem;
}

Nota: No puedo utilizar Bootstrap porque es un proyecto de fin de curso y en este caso no dejan utilizarlo. Sí que es verdad que las media query las explicó muy por encima y no me ha quedado nada claro.

6
  • estas utilizando algun framework como bootstrap o es puro CSS tuyo?
    – Alvarez
    Commented el 18 ago. 2017 a las 17:38
  • no, el CSS es mío.
    – Raúl
    Commented el 18 ago. 2017 a las 17:40
  • Con las medias que has añadido lo que haces es que cuando el tamaño de la pantalla es menor a 480 pixeles cambias el tamaño de la fuente, es eso lo que realmente quieres? Commented el 18 ago. 2017 a las 18:40
  • Si, cuando llegue a 480px que cambie el tamaño de la fuente (en este caso es excesivo 2rem pero lo he puesto de prueba). El caso que solo coge el primer cambio. El cambio de la fuente no lo realiza.
    – Raúl
    Commented el 18 ago. 2017 a las 18:42
  • Faltan un par de cierres de llaves (}) que podrían afectar a todos tus estilos. ¿Estás seguro que no tienes algún fallo de ese tipo en tu código completo?
    – Alvaro Montoro
    Commented el 18 ago. 2017 a las 20:12

2 respuestas 2

2

Para que tus elementos mantengan el formato en distintas resoluciones tienes que jugar con @media. Es una regla de css3que permite tener distintos estilos para un mismo elemento dependiendo del tamaño de la pantalla.

Aqui tienes información mas detallada de ellas.

Esta seria su sintaxis:

@media not|only mediatype and (media feature) {
    CSS-Code;
}

Por ponerte un ejemplo sencillo y para que sepas como funciona.

Si ponemos:

@media screen and (min-width: 480px) {
    body {
        background-color: red;
    }
}

@media screen and (min-width: 1000px) {
    body {
        background-color: green;
    }
}

Esto hará que cuando la pantalla ocupe mínimo 480 pixeles le pondrá el color rojo, pero si esta ocupa 1000 pixeles o mas la pintara de verde.

Es un ejemplo de lo mas absurdo y nadie haría esto, pero creo que se entiende el concepto de las media queries.

Ahora bien que es lo que debes hacer tu, usando esto que te acabo de enseñar tienes que indicar en tu navegador, que cuando la altura sea mayor a x pixeles te maquete de cierta forma, y cuando sea menor de otra.

Como otra opción te recomiendo que usar la libreria de bootstrap que ya tiene estas reglas definidas y es sencillo aprender a usarlas.

4
  • He estado utilizando la media query tal como me habéis explicado, pero hace "únicamente" solo un resultado. En el ejemplo anterior, he copiado la media query, he dejado el color de fondo verde y le he añadido lo siguiente: .menu-navegacion { font-size: 2rem;} El color verde lo reconoce al disminuir pero no realiza los siguientes cambios. La he puesto en la misma media query y he creado otra exclusivamente con ese elemento y no realiza ningún cambio.
    – Raúl
    Commented el 18 ago. 2017 a las 18:27
  • @Raúl Si añade el código para que así sea mas sencillo ayudarte Commented el 18 ago. 2017 a las 18:28
  • @Raúl edita tu pregunta y añade el código en ella Commented el 18 ago. 2017 a las 18:29
  • Ya he pegado el código en el post inicial.
    – Raúl
    Commented el 18 ago. 2017 a las 18:37
0

Podrías utilizar algún framework que te facilite esta tarea como por ejemplo BOOSTRAP , la cual a te deja responsive tu web , por lo que no deberías de tener mucho mas trabajo ,

2
  • No puedo utilizar Bootstrap porque es un proyecto de fin de curso y en este caso no dejan utilizarlo. Si que es verdad que las media query las explico muy por encima y no me ha quedado nada claro.
    – Raúl
    Commented el 18 ago. 2017 a las 17:56
  • ¿Por qué aceptas esta respuesta si dices que no puedes usar bootstrap?
    – user7176
    Commented el 22 ago. 2017 a las 17:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.