Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Relates to writing CSS media queries

Posted on 2014-11-23
1
Medium Priority
?
172 Views
Last Modified: 2014-11-23
Okay smart guys (and that's intended to be a compliment, not a sarcastic remark), here we go. :)

I have a simple one page website I'm working on . . . basically a video player embedded on a page with some very basic content surrounding it (accept for small mobile devices . . . in which case I intend to load the video player only). I'm hoping to use a simple style sheet with 3 or 4 breaking points using the min or max device-width property. (And that get's confusing as well . . . whether to use the min or max prefix.)

Anyway, one thing that confuses me is the way iPad screen resolutions are listed online. Sometimes it's 1024 x 768, sometimes 768 x 1024. Which is truly the width and which is truly the height? Which also leads to another question. Particularly with tablets (and especially with my application and the pixel cutoff point I might use), when a user rotates a tablet from portrait mode to landscape mode, could the browser potentially load a totally different style sheet . . . if using the min and max device-width property? In other words, does the device width change when the user rotates the device from portrait mode to landscape and vise versa? I'm hoping not . . . because that would seem to make writing the style sheet a whole lot more complex.
0
Comment
Question by:Thunderman54
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40460708
Which is truly the width and which is truly the height
Both

To detect orientation and load relevant css use (along with any dimensions you are targetting).

@media (orientation:portrait) {
}

@media (orientation:landscape) {

}

Open in new window

0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question