skip to Main Content

@media query

Tilpas dit style sheet til forskellige skærmstørrelser (break points)

 

responsive-design-breakpoints

TEKST OVER BILLEDE!

Klip en hæl og hak en tå!!!

Det er en bekostelig affære, at udvikle en WordPress-site som fungerer optimalt på både kæmpe-skærme, almindelige desktop-skærme, diverse laptop-skærme og hele molevitten af tablets og smart phones!

Det gode budskab er, at det teknisk sagtens kan lade sig gøre, at tilpasse CSS og indhold til alle devices (skærmbredder)!!! Men om din kundes eller arbejdsgivers budget står til "den forgyldte løsning" er ikke sikkert.

 

Responsivt design (RWD): Hjemmesiden tilpasser sig automatisk til skærmens bredde.
Alle nyere WordPress-temaer er bygget til at være responsive, og virker som udgangspunkt fint på både kæmpe-skærme og på en gammel smart-phone (fx iPhone 4).

MEN, det er kun "div-kasser" og billeder, der tilpasser sig skærmens bredde, ikke fx tekststørrelser!!!

Adaptivt design (AWD): er et specifikt style sheet til de forskellige skærmstørrelser.

I eksemplet her på siden har vi en H1'er der fylder stort på en desktop-skærm, og er ubrugelig på en iPhone 4.

 

 

/*---------------------------------------------------------
 Media Query
----------------------------------------------------------*/
/* --------- SMART PHONE iPhone 4/5 til Nexus 6p--------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 773px) {

    body {background: #eee;}
    #main {margin-top: 30px !important;}
    h1 {font-size: 45px;}
    h6{
        margin: 16px 0 1em;
        font: 500 1.2em/1.1em 'Vollkorn', serif;
        }

    .tekst-over-billede h3 {font-size: 25px;}
    .baggrundsbillede{
        background-image: url(' http://webitricerne.dk/wp/wp-content/uploads/2016/04/responsive-design-breakpoints-iphone.png');
        }
.skjul-paa-iphone{display: none;}

/* ----------- iPad på højkant ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

body {background: Cornsilk;}
    .tekst-over-billede h3 {font-size: 55px;}
    .baggrundsbillede{
        background-image: url(' http://webitricerne.dk/wp/wp-content/uploads/2016/04/responsive-design-breakpoints-ipad.png');
        }
}

desktop

iPad på højkant

Mobil

Back To Top
Search