[Solved] doubt in @mediaquery

[yoyo]

if i write certain styles in a media query like below

@media only screen 
and (min-device-width:320px) 
and (max-device-width:480px)
{
}

what happened in the phones which is greater than the 480px, it renders styles from above media query or from default desktop styles ?

[Alan C]

It will take the styles from the next media query that describes its dimensions. However if no others are specified then it will use the default styles of the largest version. You might look into using meta tags to ensure some sort of uniformity amongst phones.

Or just get the list of media queries for standard devices and build for each of them in turn so you cover all of your bases. You can find a decent list here

[alston]

I agree with Shaneisme, at first it seemed really logical to target all the main device screens, but I found it was much more work that way.

Now, I create layouts that are capable of responding to multiple devices, but I always start with the desktop site.

Next, I start shrinking the width of my browser and looking for break points (where my site breaks and looks bad) then I can address that particular section or area of the site. Not all of your elements will need to be adjusted at each screen size.

I also like to use responsinator to test on different screen sizes.

[Alan C]

Building from desktop seems counter productive to me. I did that for a long time and on occasion for my job still do, but building from small to large is easier in my opinion. From large to small I end up with more media queries and there for more work on my part. So for now ill stick with standard devices as they make up most of the market share. At least until I find a framework or make a grid system that I can be happy with.

I’m learning more and more that everyone has their own styles and I guess at the end of the day if you are happy with the work you have done then it can’t really be wrong.

[yoyo]

thanks everyone

[Author]

Posts