Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

How do I accommodate larger screens?

I'm using the "@media screen and (max-width: 480px) {" approach to my stylesheets for the different sized mobile devices I expect to hit my site.

I'm building the needed "landscape / portrait" graphics to accommodate the following dimensions:

320 / 480
480 / 800
800 / 1280

My concern is that I see several sizes of screen resolutions that don't necessarily "fit" into my collection of six graphics and I want to know if there's a way I can tweak my "@media screen" syntax so that a mobile device with a screen resolution of 540 / 960 will still be accommodated by my 800 / 1280 setting, even though the dimensions aren't referenced specifically.

It may be that's already being addressed and I just don't have enough of an understanding of the code. It just seems like there's been times I've been in development mode on my desktop and unless I got rid of the "@media screen" dynamics within my css, because my desktop screen was larger than anything referenced by my stylesheet, I didn't get any kind of stylesheet at all.

So, how do I craft my stylesheet so I can be certain that all my user's screen sizes are being accommodated?
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Why don't you just test those modes?  Chrome and Firefox both have 'mobi' modes with different resolutions available.  Opera has their Mobile Emulator too.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial