Anpassa ett nyhetsbrev efter en bildskärms bredd


Behärskar du HTML och stilmallar och vill skapa nyhetsbrev som automatiskt anpassas efter bildskärmens bredd så kan du utnyttja en regel som heter media query (@media) i HTML / CSS till detta. Ska du ta fram nyhetsbrev som ska kunna läsas i så skilda miljöer som stationära datorer, laptops, pekplattor och mobiltelefoner / smarttelefoner så kan detta användas för att skapa nyhetsbrev som ser bra ut i alla dessa miljöer.
  
 Förutom att anpassa bredden på ett nyhetsbrev till skärmens bredd så kan man även anpassa storleken på teckensnitt, och bredd och höjd för bilder, på samma sätt. Även andra delar av nyhetsbrevet kan anpassas.
Exemplet nedan visar hur regeln @media kan användas:
 
 
 Hur man använder regeln @media i HTML / CSS
 
@media only screen and (max-device-width: 480px) {
    .page {
        padding: 0px 10px 5px 10px !important;
    }
    body {
        padding: 10px !important;
    }
    #airmail-line {
        margin: 0 -10px !important;
    }
    .header {
        font-size: 16px !important;
    }
    .headline {
        font-size: 18px !important;
    }
    #screenshot {
        width: 270px;
        height: 180px;
    }
}
  
 
I ovanstående exempel så kommer storleksinformationen och teckensnittsstorlekarna endast att användas om bildskärmen är maximalt 480 bildpunkter (pixels) bred. Är bildskärmen bredare så används inte ovanstående information utan då används de ordinarie inställningarna istället. På detta sätt kan du skapa nyhetsbrev som ser bra ut i både mobiltelefoners / smarttelefoners bildskärmar och i bildskärmar för datorer mm.

Många äldre mobiltelefoner och smarta telefoner stöder dock inte detta, men då kommer ovanstående skriptkod att ignoreras och de ordinarie inställningarna används istället.
  
Responsiv webbdesign
 
Det här sättet att automatiskt anpassa en layout till en bildskärms dimensioner kallas för Responsiv webbdesign (på engelska: Responsive Web Design eller RWD). Responsiv webbdesign används normalt på webbsidor som måste kunna visas bra i olika bildskärmsmiljöer, men nuförtiden har det blivit allt aktuellare även för nyhetsbrev som skickas ut via e-post eftersom samma teknik kan tillämpas även där.

Mer information om regeln @media finns på följande sidor:
 
https://www.w3.org/TR/css3-mediaqueries/
https://www.w3.org/TR/CSS21/syndata.html
   
 << Återvänd
  		 
SamLogic