2

Hello friends I am coming here with a confusion I found a web page which coniatins two container one is left side and second is right side when I reduse the width of the browser after one limiit the right side div moved beneth left side div its very strange for me i saw this first time i trying to figure out how did they do that but faild to get the same result . Just go through the link http://jquerymobile.com/demos/1.2.0-pre/

I hope you guys understand what I am trying to explain. Just open link and reduce the width of the browsers after on limit you can see what i am talking about

Please share your Views

Thanks in advance ......

2 Answers 2

5

They used CSS media queries.

http://jsfiddle.net/xPMqm/1/

HTML:

<div id="chameleon"></div>​

CSS:

#chameleon{
    width:100px;
    height:100px;
    background-color:yellow;
}

@media all and (min-width:600px) {
    #chameleon{
        background-color: blue;
        height: 200px;
    }
}

@media all and (min-width:800px) {
    #chameleon{
        background-color: green;
        height:300px;
    }
}

@media all and (min-width:1000px) {
    #chameleon{
        background-color: orange;
        height: 400px;
    }
}


​
2
  • its amazing thanks for your help @Mythril one more thing is this support all browsers..
    – Kamal
    Aug 28, 2012 at 6:49
  • Consult CanIUse for all the feature penetration knowledge you can handle :). Aug 28, 2012 at 6:54
4

Its called Responsive Web Design. You can create a website for all the different screen sizes.(desktop , tabs and mobile devices.)

The layout can be controlled by applying media queries in which specify the css on the basis of screen width.

Eg: @media screen and (min-width: 900px) { .class { background: #666; } }

Here the media type is screen and the css specified will apply till the width is 900px or more. As soon as the width of the screen becomes less than 900px, the css specified inside the media query is not applied.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.