Responsive Screen sizes

by amindunited

HTML

<div class="device desktop">
    <div class="screen"></div>
</div>
<div class="device ipad">
    <div class="screen"></div>
</div>
<div class="device iphone">
    <div class="screen"></div>
</div>
<div class="device iphone-portrait">
    <div class="screen"></div>
</div>
<div class="device ipad-portrait">
    <div class="screen"></div>
</div>

CSS

body {
    min-width: 1640px;
}
.device {
    /*float: left;*/
    display: inline-block;
    vertical-align: top;
    border-radius: 25px;
    background-color: #000000;
    margin: 50px;
    border: solid 1px #666666; 
}

.screen {
    background-color: #ededed;
    margin: 25px;
    border-radius: 25px;
    -webkit-box-shadow: inset 3px 3px 5px 1px rgba(0, 0, 0, .5);
box-shadow: inset 3px 3px 5px 1px rgba(0, 0, 0, .5);
}

.desktop .screen {
    width: 1366px;
    height: 768px;
}
.ipad .screen {
    height: 1024px;
    width: 768px;
}

.ipad-portrait .screen {
    width: 1024px;
    height: 768px;
}
.iphone .screen {
    width: 320px;
    height: 480px;
}

.iphone-portrait .screen {
    height: 320px;
    width: 480px;
}