0

Buenos dias compañeros:

Tengo un pequeño problema de visualización en HTML. Estoy desarrollando una aplicación web que contiene una imagen y dos botones, el primero sera para buscar la imagen y el segundo para subirla. Todo eso lo tengo solucionado.

Mi problema viene cuando pienso que esta aplicación web tiene que verse bien en diferentes dispositivos, lo cual implica agrandar o empequeñecer la pantalla, conclusión, ¿se os ocurre o sabéis una forma de que se vea bien sin importar el tamaño de pantalla?

No me importa modificar el formato de botones si hace falta, lo importante es que sea atractivo a la vista. Adjunto código e imágenes de lo actual, uso un CSS Pure.

<div class="pure-control-group">
 <img id="image" name="image" style="border: 2px solid ; width: 200px; height: 130px;" alt="" src="../image/noimage.png" align="middle"><br>
 <input type="hidden" code="hidden" name="imagePath" value="">
 <input id="loadFileXml" name="loadFile" style="width: 90px;" value="Preview" onclick="document.getElementById('fileToUpload').click();" type="button">
 <input id="fileToUpload" style="display: none;" name="fileToUpload" value="Upload file" onchange="previewImage(document.getElementById('image'), document.getElementById('fileToUpload'))" disabled="disabled" type="file">
 <input id="botonUpload" name="uploadFile" style="width: 90px; margin-left: 18px;" value="Upload" onclick="uploadAjax(document.getElementById('fileToUpload'))" type="button">

introducir la descripción de la imagen aquí

Esta es la imagen en pantalla grande

introducir la descripción de la imagen aquí

Esta es en pantalla pequeña, como veis se desplazan los botones y queda muy cerca de la scrollBar

2 respuestas 2

3

Como te ha indicado @Manuel Robles, para esto se utilizan los media queries.

Puedes poner el rango de tamaños a tu gusto y poner dentro los estilos que necesites.

Te dejo un ejemplo práctico:

//Pantallas mayores a 1000px
@media (min-width:1000px){
  #loadFileXml #botonUpload{
    width:90px;
  }
}

//Pantallas entre 500px y 999px de ancho
@media (min-width:500px) and (max-width:999px){
  #loadFileXml #botonUpload{
    width:70px;
  }
}

//Pantallas menores a 500px
@media (max-width:499px){
  #loadFileXml #botonUpload{
    width:50px;
  }
}
<div class="pure-control-group">
 
 <input type="hidden" code="hidden" name="imagePath" value="">
 <input id="loadFileXml" name="loadFile" value="Preview" onclick="document.getElementById('fileToUpload').click();" type="button">
 <input id="fileToUpload" style="display: none;" name="fileToUpload" value="Upload file" onchange="previewImage(document.getElementById('image'), document.getElementById('fileToUpload'))" disabled="disabled" type="file">
 <input id="botonUpload" name="uploadFile" style="margin-left: 18px;" value="Upload" onclick="uploadAjax(document.getElementById('fileToUpload'))" type="button">

1
2

Para eso puedes usar media queries

por ejemplo si quieres que en menos de 600px se oculte algo, le pones la clase ocultar y la declaras así :

@media (max-width: 600px) {

.ocultar{
    display: none;
  }
}
2
  • Nunca he usado esto, la cosa no seria ocultarlo, sino alomejor modificar el tamaño para que se ajustase, pero alomejor el problema con esto es que tengo que controlar muchos tamaños no? a 400px 500px 600px.. voy a probarlo aun asi Commented el 15 sept. 2017 a las 7:56
  • igual, lo que viene dentro son clases de CSS con el nombre y atributos que tu quieras y puedes poner en el media tanto tamaño mínimo como máximos (incluso rangos y orientaciones) a tu gusto Commented el 15 sept. 2017 a las 7:59

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.