09. November 2016

    Verwendung von Media Querys um die mobile Ausspielung dediziert an das Layout anzupassen.

    <style>

    /* eigenschaften für alle devices*/

    .article {margin:50px; width: 100%;}

     

    /* unter einer Breite von 648px oder 47.937em werden folgende eigenschaften  verändert und vom Browser dargestellt*/

     

    @media screen and (max-width: 47.9375em) {
        .article {margin:0; }
    }
    </style> 

    Damit die Webseite sich einem schmalen Browserfensterals auch auf dem Smartphone gut
dargestellt wird, müssen mithilfe eines meta-Elements dafür gesort werden, dass sich die Seite an den Viewport anpasst.
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">

    Tags: css