Media Query vs Pseudo Class

by Dragonseer

HTML

<div id="myDiv" class="myDiv">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue aliquet lorem egestas aliquet. Donec dolor urna, consequat non mauris eget, varius ultricies nibh. Fusce enim nulla, venenatis non augue eget, pellentesque commodo ante. In ac justo mauris. Nam eget ante accumsan, sodales mi a, sollicitudin mauris. Duis sollicitudin massa non iaculis consectetur. Maecenas sit amet turpis in dolor tempus ullamcorper. Maecenas gravida lectus eros, eget malesuada augue commodo in. Quisque dictum pharetra adipiscing.
</div>
<input type="button" onclick="fullscreen()" value="Fullscreen"/>

CSS

.myDiv
{
    width: 80%;
}

    .myDiv:-webkit-full-screen
    {
        margin-top: 0;
    }

    .myDiv:-moz-full-screen
    {
        margin-top: 0;
    }

    .myDiv:-ms-full-screen
    {
        margin-top: 0;
    }

    .myDiv:fullscreen
    {
        margin-top: 0;
    }

@media screen and (min-width: 481px)
{
    .myDiv
    {
        margin: 50px;
    }
}

JavaScript

function fullscreen() 
{
    var element = document.getElementById("myDiv");

    if (element.requestFullscreen) 
    {
        element.requestFullscreen();
    }

    else if (element.msRequestFullscreen) 
    {
        element.msRequestFullscreen();
    }

    else if (element.mozRequestFullScreen) 
    {
        element.mozRequestFullScreen();
    }

    else if (element.webkitRequestFullscreen) 
    {
        element.webkitRequestFullscreen();
    } 
}