Media Queries Dimension

GENERAL DEVICE

Screen
$xl-screen: “only screen and (min-width : 1200px)”;
$large-screen: “only screen and (max-width : 1200px)”;
$medium-screen: “only screen and (max-width : 992px)”;

Tablet
$tablet: “only screen and (max-width : 768px)”;

Phone
$medium-phone: “only screen and (max-width : 480px)”;
$small-phone: “only screen and (max-width : 320px)”;

SPECIAL DEVICE

SCREEN

Non-retina
$non-retina: “screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1)”;

Retina Display
$retina: “screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)”;

Portrait and Landscape
$portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)”;

Portrait
$portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)”;

Landscape
$landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)”;

IPAD 1 AND 2

Portrait and Landscape 
$ipad12-portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)”;

Portrait
$ipad12-portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)”;

Landscape
$ipad12-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)”;

IPAD 3 AND 4

Portrait and Landscape
$ipad34-portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$ipad34-portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)”;

Landscape
$ipad34-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)”;

GALAXY TAB

Portrait and Landscape
$galaxytab-portrait-landscape: “(min-device-width: 800px) and (max-device-width: 1280px)”;

Portrait
$galaxytab-portrait: “(max-device-width: 800px) and (orientation: portrait)”;

Landscape
$galaxytab-landscape: “(max-device-width: 1280px) and (orientation: landscape)”;

IPHONE 4

Portrait and Landscape
$iphone4-portrait-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone4-portrait: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone4-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 5

Portrait and Landscape
$iphone5-portrait-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone5-portrait: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone5-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 6

Portrait and Landscape
$iphone6-portrait-landscape: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone6-portrait: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone6-landscape: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 6+

Portrait and Landscape
$iphone6p-portrait-landscape: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)”;

Portrait
$iphone6p-portrait: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)”;

Landscape
$iphone6p-landscape: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)”;

Advertisements

How To Create an IE-Only Stylesheet

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

  • You got problems, they need fixin’
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft

And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

Continue reading “How To Create an IE-Only Stylesheet”

Create An Animated Bar Graph With HTML, CSS And jQuery

People in boardrooms across the world love a good graph. They go nuts for PowerPoint, bullet points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and everything is always “moving forward.” Backwards is not an option for people who facilitate paradigm shifts in the zeitgeist. Graphs of financial projections, quarterly sales figures and market saturation are a middle-manager’s dream.

screenshot

How can we as Web designers get in on all of this hot graph action? There are actually quite a few ways to display graphs on the Web. We could simply create an image and nail it to a Web page. But that’s not very accessible or interesting. We could use Flash, which is quite good for displaying graphs — but again, not very accessible. Besides, designers, developers and deities are falling out of love with Flash. Technologies such as HTML5 can do many of the same things without the need for a plug-in. The new HTML5 <canvas> element could even be adapted to the task. Plenty of charting tools are online that we might use. But what if we wanted something a little more tailored?

Continue reading “Create An Animated Bar Graph With HTML, CSS And jQuery”