<h1> width-abhängig als Link

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Eine zweite Variante ohne redundantes Markup wäre:

<h1><a href="#">Überschrift</a></h1>  

@media (max-width:25em) {  
  h1 a {  
    display: none;  
  }  
  h1::before {  
    content: "Überschrift";  
  }  
}  

Vorteile: kein redundantes Markup, kürzerer CSS-Code
Nachteil: Überschriftstexte müssen an zwei Stellen geändert werden.

Das ließe sich ändern zu

<h1 data-content="Überschrift"><a href="#">Überschrift</a></h1>  

@media (max-width:25em) {  
  h1 a {  
    display: none;  
  }  
  h1::before {  
    content: attr(data-content);  
  }  
}  

Matthias