CODEWITHSUNDEEP
css
antonjs
antonjs

Reputation: 14318

How to dynamically adapt the layout by using only CSS

Depending by the size of the app interface, I need to adapt dynamically the layout by using only CSS. It will be possible?

If the width of my app is 500px, I'd like to display the 3 containers in this way:

            | A   B |  // width 500px
            |   C   |

If the width of my app is 750px, I'd like to display the 3 containers in this way:

            |  A  B  C  | // width 750px

Here is the example.

By clicking on the button "change app size" you can change the size of the container.

Upvotes: 4

Views: 2311

Answers (3)

Blender
Blender

Reputation: 298106

With CSS media queries:

<link type="text/css" rel="stylesheet" href="style.css" />    
<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/mobile-500.css" />
<link rel="stylesheet" media="screen and (max-width: 750px)" href="css/mobile-750.css" />

Upvotes: 4

Catfish
Catfish

Reputation: 19284

You'll probably want to look into css media queries. Check out this link - http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Using CSS3 Media Queries, yes you can.

@media (min-width:500px) { ... }

See http://www.w3.org/TR/css3-mediaqueries/ for more information.

Upvotes: 4

Related Questions