Skip to content

Instantly share code, notes, and snippets.

@stevomccormack
Last active September 3, 2019 15:32
Show Gist options
  • Save stevomccormack/450224c0ab35fbbc7bcedfea85146685 to your computer and use it in GitHub Desktop.
Save stevomccormack/450224c0ab35fbbc7bcedfea85146685 to your computer and use it in GitHub Desktop.
/* https://drafts.csswg.org/mediaqueries-4/ */
/* Portrait */
@media screen and (orientation:portrait) {
}
/* Landscape */
@media screen and (orientation:landscape) {
}
/* ------------------------------------------------------------------------------------ */
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/ */
@media (pointer:coarse) {
.which-pointer::after {
content: "You have a coarse pointer, are you on a touchscreen device?";
}
}
@media (pointer:fine) {
.which-pointer::after {
content: "You have a fine pointer, are you using a mouse or trackpad?";
}
}
/* ------------------------------------------------------------------------------------ */
@media (hover) {
.can-i-hover::after {
content: "You look like you can hover.";
}
}
@media (hover:none) {
.can-i-hover::after {
content: "I don't think you can hover.";
}
}
/* ------------------------------------------------------------------------------------ */
@media (min-width: 40em) and (max-width: 59em) {
}
@media (40em <= width <= 59em ) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment