0

Tengo una página que no va a ser responsive, y lo que quiero hacer es simplemente que, cuando se abra con una resolución menor de xxxx px, aparezca un mensaje: "esta página no es responsive" y un enlace a cargar la versión desktop.

Estoy empezando a aprender html y css, y solo he visto cómo cambiar estilos en función de la resolución, pero no la maquetación.

1
  • Revisa las media query de CSS
    – Xerif
    el 14 ene. 2018 a las 13:55

1 respuesta 1

0

Puedes crear un div en tu página que únicamente se muestre si la resolución es menor de un valor dado.

Cuando se muestre el div lo muestras con posicionamiento absoluto, ocupando todo el tamaño de la pantalla y con un z-index alto para que se muestre por encima del resto del contenido:

.noresponsive{
  display:none;
}
@media (max-width: 600px) {
  .noresponsive {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10000;
    display: block;
    background-color: white;
    width: 100%;
    height: 100%;
  }
}
<!-- Este sería el contenido normal de la página -->
<div>
  <h1>Este es el contenido normal de la página</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<!-- Este div únicamente se mostrará para resoluciones bajas -->
<div class="noresponsive">
  <h1>Esta página no es responsive</h1>
  <p>Rediríjase a <a href="http://....">Nueva página</a></p>
</div>

1
  • Mil gracias Asier. Siento no poder dar upvote a tu respuesta por ser nuevo. He metido el resto de la web en un div con display: none; cuando se displayea tu solución, porque aparecía tu div, pero el resto de la web seguía apareciendo. Gracias!
    – M.T.
    el 15 ene. 2018 a las 13:15

Tu Respuesta

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

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