Created
December 4, 2018 14:13
-
-
Save frankstallone/cee114d0b6935717696e6506552bc75a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Targetting iPhone X Series of Smartphones | |
* | |
*/ | |
$iphone-x-main-nav-height: 80px; | |
$iphone-x-main-nav-padding: calc(#{$iphone-x-main-nav-height} / 2); | |
$iphone-x-header-height: $header-height; | |
$iphone-x-height-offset: $iphone-x-main-nav-height + $iphone-x-header-height; | |
$iphone-x-content-area: calc(100vh - #{$iphone-x-height-offset}); | |
/** | |
* Media Query Mixin | |
* Current $device's: 'iphone-x', 'iphone-xr', 'iphone-xs-max', 'iphone-x-all' | |
* We can add more breakpoints by adding them to the $devices list below | |
* | |
* Example usage: | |
* @include breakpoint(iphone-x-all) { @content } | |
* | |
*/ | |
$iphone-x-device-width: 375px; | |
$iphone-x-device-height: 812px; | |
$iphone-x-webkit-device-pixel-ratio: 3; | |
$iphone-xr-device-width: 414px; | |
$iphone-xr-device-height: 896px; | |
$iphone-xr-webkit-device-pixel-ratio: 2; | |
/* | |
* iPhone XS matches iPhone X query | |
* Ref: https://stackoverflow.com/a/52321213 | |
* | |
*/ | |
$iphone-xs-max-device-width: 414px; | |
$iphone-xs-max-device-height: 896px; | |
$iphone-xs-max-webkit-device-pixel-ratio: 3; | |
@mixin breakpoint($device) { | |
@if $device == iphone-x { | |
@media only screen and (device-width: $iphone-x-device-width) and (device-height: $iphone-x-device-height) and (-webkit-device-pixel-ratio: $iphone-x-webkit-device-pixel-ratio) { | |
@content; | |
} | |
} | |
@if $device == iphone-xr { | |
@media only screen and (device-width: $iphone-xr-device-width) and (device-height: $iphone-xr-device-height) and (-webkit-device-pixel-ratio: $iphone-xr-webkit-device-pixel-ratio) { | |
@content; | |
} | |
} | |
@if $device == iphone-xs-max { | |
@media only screen and (device-width: $iphone-xs-max-device-width) and (device-height: $iphone-xs-max-device-height) and (-webkit-device-pixel-ratio: $iphone-xs-max-webkit-device-pixel-ratio) { | |
@content; | |
} | |
} | |
@if $device == iphone-x-all { | |
@media only screen and (device-width: $iphone-x-device-width) and (device-height: $iphone-x-device-height) and (-webkit-device-pixel-ratio: $iphone-x-webkit-device-pixel-ratio), only screen and (device-width: $iphone-xr-device-width) and (device-height: $iphone-xr-device-height) and (-webkit-device-pixel-ratio: $iphone-xr-webkit-device-pixel-ratio), only screen and (device-width: $iphone-xs-max-device-width) and (device-height: $iphone-xs-max-device-height) and (-webkit-device-pixel-ratio: $iphone-xs-max-webkit-device-pixel-ratio) { | |
@content; | |
} | |
} | |
@else { | |
// If you add more '@if else $device's be sure to update warn | |
@warn "Breakpoint mixin supports: iphone-x, iphone-xr, iphone-xs-max, iphone-x-all"; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment