Skip to main content
deleted 95 characters in body
Source Link
DBUK
  • 472
  • 5
  • 14

I guess this depends on the design, which might differ each build. It also depends if your using 100% fluid or changing on breakpoints.

I tend to use some of the following, generally the large sizes don't change much at all between breakpoints:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser 
@media only screen and (-webkit-min-device-pixel-ratio:2){} // retina, not used it yet… 

No point trying to cover all the different android etc resolutions...there are so many.

Also sometimes the breakpoints don't trigger on the actual size due to the scrollbar, which each browser has different rules for. Might be wise to cut off 20px per @media to make sure they trigger. I sometimes swap the min-width:320px for a max-width: 480px, as under 320 nothing might be displayed.

I guess this depends on the design, which might differ each build. It also depends if your using 100% fluid or changing on breakpoints.

I tend to use some of the following, generally the large sizes don't change much at all between breakpoints:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser 
@media only screen and (-webkit-min-device-pixel-ratio:2){} // retina, not used it yet… 

No point trying to cover all the different android etc resolutions...there are so many.

Also sometimes the breakpoints don't trigger on the actual size due to the scrollbar, which each browser has different rules for. Might be wise to cut off 20px per @media to make sure they trigger. I sometimes swap the min-width:320px for a max-width: 480px, as under 320 nothing might be displayed.

I guess this depends on the design, which might differ each build. It also depends if your using 100% fluid or changing on breakpoints.

I tend to use some of the following, generally the large sizes don't change much at all between breakpoints:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser

No point trying to cover all the different android etc resolutions...there are so many.

Also sometimes the breakpoints don't trigger on the actual size due to the scrollbar, which each browser has different rules for. Might be wise to cut off 20px per @media to make sure they trigger. I sometimes swap the min-width:320px for a max-width: 480px, as under 320 nothing might be displayed.

Source Link
DBUK
  • 472
  • 5
  • 14

I guess this depends on the design, which might differ each build. It also depends if your using 100% fluid or changing on breakpoints.

I tend to use some of the following, generally the large sizes don't change much at all between breakpoints:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser 
@media only screen and (-webkit-min-device-pixel-ratio:2){} // retina, not used it yet… 

No point trying to cover all the different android etc resolutions...there are so many.

Also sometimes the breakpoints don't trigger on the actual size due to the scrollbar, which each browser has different rules for. Might be wise to cut off 20px per @media to make sure they trigger. I sometimes swap the min-width:320px for a max-width: 480px, as under 320 nothing might be displayed.