[Solved] responsive measurement

[LearnCss]

Hi, I’ve read a lot of article about responsive design but I have problem with measurement, for example they say when devices is tablet css changes like this…, when smart phone like this…, but I can’t undrestand how they measure new width,paddings and margins in variable devices? for example we have 4 div in a row and margin is 2px, how can we realize what’s proper number of div in each row in a smart phone or tablet without loosing readability? and what is new margin?

for example at this link http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries in this code `@media screen and (max-width: 980px) {

#pagewrap {
    width: 95%;
}

#content {
    width: 60%;
    padding: 3% 4%;
}

` why width is 95% not for example 80%? or why padding is 3% 4%?

thanks a lot

[Paulie_D]

why width is 95% not for example 80%? or why padding is 3% 4%?

Because that’s what the designer wanted at that specific screen width.

It’s design specific. When the browser window is at a certain size, those elements need to be a certain width to maintain the overall design.

Your design might, and probably will, require different specific numbers.

[LearnCss]

those elements need to be a certain width to maintain the overall design

do you mean we need Trail and error to gain proper measures?

but I think there was a calculation way based on basic layout measures.

[Paulie_D]

Not exactly, as I said, it depends on how you want your design to work at certain widths.

There are some ‘standard’ device widths which it is, perhaps, advisable to use a decent starting points.

You can find them in the snippets section here.

[Taufik Nurrohman]

→ Let content determine breakpoints

[LearnCss]

Thanks a lot Paulie_D and Taufik

[Author]

Posts