responsive-media-queries-features.scss

/* 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 ) {

}