Estoy tratando de hacer que toda mi página web esté disponible para dispositivos móviles, casi todo en mi página responde pero el texto es demasiado pequeño en dispositivos móviles, ¿alguien podría ayudarme con, digamos: HTML:

<div class="main">
<section class="page" id="page1">
<div id="background">
<img src="images/background.png" alt="background">
</div>

<h1> </h1>

Css:

h1 {
width: 50vw;
position: fixed;
top: 28vw;
left: 50vw;
text-align: center;
transform: translate(-50%, -50%);
font-size: 2.1vw;
font-family: 'Slabo 27px', serif;
font-style: italic;
color: white;
-webkit-animation: fadein 14s;
-moz-animation: fadein 14s;
-ms-animation: fadein 14s; 
-o-animation: fadein 14s; 
animation: fadein 14s;
}

(He configurado el texto para la etiqueta H1 en un archivo Javascript)

¿Cómo puedo hacer la etiqueta h1 para que el texto se vea grande en dispositivos móviles como en una computadora de escritorio?

0
Jess 18 oct. 2017 a las 17:57

3 respuestas

La mejor respuesta

Puede usar Consultas de medios. Se ven así:

@media screen and (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

Esto dice que en pantallas con un ancho de hasta 600 px, el tamaño de fuente de su etiqueta h1 será de 24 px. A partir de entonces, será 2.1vw, como se define en su CSS original.

También deberás agregar

<meta name="viewport" content="width=device-width, initial-scale=1">

A tu <head>.

En realidad, es más deseable, en lugar de usar max-width en consultas de medios, usar min-width. Cuando usa max-width, primero escribe el CSS para el escritorio y luego usa consultas de medios para reducir el contenido. Esto presenta muchos problemas de especificidad ya que continuamente sobrescribe CSS válido, lo que lleva al uso de !important, lo cual es malo. El uso de min-width significa que usted escribe su CSS predeterminado para dispositivos móviles y, a medida que aumenta el ancho del navegador, las consultas de medios se activan ya que ahora son válidas. Esto se llama un enfoque "móvil primero".

0
Tom Oakley 18 oct. 2017 a las 15:12

Necesita una consulta de medios para puntos de interrupción móviles para restablecer su tamaño de fuente a algo más legible, por ejemplo

@media only screen and (max-width: 768px) {
   h1 { font-size: 16px; }
}
0
delinear 18 oct. 2017 a las 15:05

¿Has configurado la ventana gráfica correctamente?

<meta name="viewport" content="width=device-width, initial-scale=1">
0
Matt_S 18 oct. 2017 a las 15:03