Setare CSS in functie de device folosit cu Viewport Media

[andras]

Salut,
Mie nu imi functioneaza partea asta:

Cod: Selectaţi tot

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="css/stylemobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 481px)" href="css/stylenou.css" />

in stylenou.css am pus:

Cod: Selectaţi tot

#spanu{
  font-size: 2.5em; 	
}

iar in stylemobile.css am pus:

Cod: Selectaţi tot

#spanu{
  font-size: 1em; 	
}

dar in smartphone afiseaza tot font-size: 2.5em;. Am un Android 4.4.2 cu rezolutia 854 x 480 (diagonala 4.5 Inch) iar aplicatia o deschid in browserul smartphone. Care sa fie cauza? Multumesc.

La css nu conteaza, sau nu recunoaste, tipul de device folosit; ci dimensiunea ferestrei. Ca sa vezi daca functioneaza, poti testa si pe un laptop, modificand lungimea ferestrei browser-ului.
Poti sa testezi acest style css, micsorand si marind lungimea ferestrei:

Cod: Selectaţi tot

<style>
@media screen and (max-width: 480px) {
  body {
    background-color: #00da01;
  }
}

@media screen and (min-width: 481px) {
  body {
    background-color: #bbddfe;
  }
}
</style>

Incearca sa modifici valorile, in loc de 480, sa setezi in jurul lui 400, 401; apoi micsorezi fereastra pe smartphone sa vezi daca are efect.