media queries @import style sheets

[drotar]

I was just wondering if anybody has finally figured out a way to build a @import style sheet for media queries that covers pretty much all the devices. I know about the break points but I am still running into trouble with the Samsung Galaxy S4 in landscape mode. My sample can be found with a site i just finished http://www.johnbehring.tv

my media queries are as follows: (my question is is how to improve them – if you have any suggestions they would be greatly appreciated on this end-thanks).

/* phone-portrait */
@import url(“phone-portrait.css”) only screen
and (min-width:320px )
and (max-width: 568px )
and ( orientation: portrait );

/* phone4 -landscape*/
@import url(‘phone-landscapeFour.css’) only screen
and (min-width:321px )
and (max-width: 480px)
and (orientation: landscape );

/* phone5 -landscape*/
@import url(‘phone-landscapeFive.css’) only screen
and (min-width:481px )
and (max-width: 568px)
and (orientation: landscape );

/* ———- Tablets ———- */
@import url(“tablet.css”) only screen
and (min-width: 569px )
and (max-width: 1024px)
and (orientation: portrait);

@import url(‘tablet-landscape.css’) only screen
and (min-width: 569px)
and (max-width: 1024px)
and (orientation: landscape);

/* desktop */
@import url(“desktop.css”) only screen
and (min-width: 1025px);

/* hi-res /
@import url(“hi-res.css”) only screen
and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2); /ADD FOR IOS7*/

[Senff]

I was just wondering if anybody has finally figured out a way to build a @import style sheet for media queries that covers pretty much all the devices.

If you use media queries, you’re not building a site that should cover all devices, but one that covers all screen sizes. Like @shaneisme said, you should think about what happens if a new phone comes out.

If you make sure that your site looks good on every screen width between (say) 200 pixels and 3000 pixels, you can be (almost) sure that it will look good on every device — unless that device has a screen that’s smaller than 200 or larger than 3000.

I suggest you don’t work with “established” breakpoints (such as 480, 568, 768, etc.) — just resize your browser and check when your site “breaks”. That’s your breakpoint. E.g. if your site looks good on a small screen but starts looking bad at 634 pixels or higher, then that’s where you should set your breakpoint.

[drotar]

problem, gentlemen, to this is the landscape modes on tablets and smart phones. especially when going full screen. i understand the breakpoint method but thins look bad
i find when honing the graphics for say an iPad landscape

[__]

sorry; but what’s the difference between a small tablet in portrait mode (say, 480px wide) and a large phone in landscape mode (say, 480px wide)?

Are you trying to make a layout that covers the entire screen, pixel-perfect, with no scrolling? If so, then no: there’s no simpler way than making hundreds of separate media queries.

Having considered this, go re-read and try to understand what @shaneisme and @Senff suggested.

[Author]

Posts