Skip to content

Responsive Design for JQuery Mobile

April 30, 2013

Using @media screen in CSS, this is a very useful tip for responsive design for web frameworks of any sort (including which I have used for JQuery Mobile), here the code points to a popup box div element for maximum widths 319px, 639px, 959px, and a minimum width of 960px and changes the CSS accordingly.

It is very dynamic in that it can change on the fly, and is very useful for images.

@media screen
and (min-width : 180px)
and (max-width : 319px)
{
    
    div .popup
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:200px;
        height:66px;
    }
    
    div .popuplarge
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:200px;
        height:150px;
    }
}

@media screen
and (min-width : 320px)
and (max-width : 639px)
{
    
    div .popup
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:200px;
        height:66px;
    }
    
    div .popuplarge
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:200px;
        height:150px;
    }
}

@media screen
and (min-width : 640px)
and (max-width : 959px)
{

    div .popup
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:300px;
        height:100px;
    }
    
    div .popuplarge
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:300px;
        height:150px;
    }
}

@media screen
and (min-width : 960px)
{

    div .popup
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:300px;
        height:100px;
    }
    
    div .popuplarge
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        width:300px;
        height:150px;
    }
}

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: