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?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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.
0
RobOwner (Aidellio)Commented:
That's why i use bootstrap (http://getbootstrap.com) so that it does all that hard work.  With images you can set the width to 100% (of its container) and height to auto and it will resize no matter what the screensize (http://getbootstrap.com/css/#images).
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.