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 något som heter media query (@media) i HTML till detta. Ska du ta fram nyhetsbrev till både datorer och mobiltelefoner/smarttelefoner så kan detta användas för att skapa nyhetsbrev som ser bra ut i bägge fallen.

Exemplet nedan visar hur @media kan användas:
 
 
@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 datorers bildskärmar och mobiltelefoners/smarttelefoners bildskärmar.

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.

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