media queries staffeln

[MrMurphy1]

Hallo

Ich habe mal ein Beispiel erstellt, angelehnt an deine Quellcodeschnipsel.

Zu dem HTML

      <div id="table_leaque">
         <div id="liga_tabelle">
            <div id="platzierung">
               <p>#platzierung</p>
            </div>
            <div id="teambild">
               <p>#teambild</p>
            </div>
            <div id="teamname">
               <p class="typoklein"><acronym>.typoklein</acronym></p>
            </div>
            <div id="tordifferenz">
               <p>#tordifferenz</p>
            </div>
            <div id="punkte">
               <p>#punkte</p>
            </div>
         </div>
      </div>

kann das CSS verwendet werden:

   @media all {
      .typoklein {
         font-size: 1.5em;
         background-color: cyan;
         text-align: left;
         position: relative;
         top: 50%;
         /*-webkit-transform: translateY(-50%);*/
         /*-ms-transform: translateY(-50%);*/
         /*transform: translateY(-50%);*/
      }
   }
   @media all and (min-width: 400px) {
      .typoklein {
         font-size: 1.4em;
         background-color: blue;
      }
   }
   @media all and (min-width: 800px) {
      .typoklein {
         font-size: 1.2em;
         background-color: green;
      }
   }
   @media all and (min-width: 1100px) {
      .typoklein {
         font-size: 1.1em;
         background-color: orange;
      }
   }

Wobei ich eher HTML5 und damit teilweise auch die neueren Elemente verwenden würde.

Wenn das bei dir nicht funktioniert enthälst du uns CSS-Angaben vor. Die können wir natürlich nur berücksichtigen wenn wir sie kennen.

Gruss

MrMurphy