How to develop a Flxexible Web Design
Post by jorgepson on
Mar 5, 2013 1:24:36 AM CST
Here's what i found in developing a flexible and responsive web design
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Or as part of an@import directive:
@import url("shetland.css") screen and (max-device-width: 480px);
Adapt, respond, and overcome
Let’s turn our attention to the images at the base of our page. In their default layout, the relevant CSS currently looks like this:
.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; / 21px / 633px /
width: 31.121642969984202211%; / 197px / 633px /
}li#f-mycroft,
li#f-winter {
margin-right: 0;
}
linearize the page let's say 600px
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}
source: http://www.gather.com/viewArticle.action?articleId=281474981856250
sample responsive web design
|
|
