Last active
June 13, 2020 01:36
-
-
Save grabbou/72767db51f97fe86cfea 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
// 1. Queries for width, min-width, height & min-height | |
const a = StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
}, | |
'@media (min-width: 500px) and (min-height: 600px)': { | |
container: { | |
fontSize: 10, | |
}, | |
}, | |
'@media (min-width: 200px)': { | |
container: { | |
fontSize: 8, | |
}, | |
}, | |
}); | |
// 2. Queries for orientation | |
StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
}, | |
'@media (orientation: landscape)': { | |
container: { | |
fontSize: 15, | |
} | |
}, | |
}); | |
// 3. Queries with platform-specific stuff (via custom non-standard `ios/android` media_type) | |
StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
}, | |
'@media ios (min-width: 600px)': { | |
container: { | |
fontSize: 15, | |
} | |
}, | |
'@media android (min-width: 600px)': { | |
container: { | |
fontSize: 14, | |
} | |
}, | |
}); | |
// 4. Queries for device ratio | |
StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
}, | |
'@media ios (aspect-ratio: 16 / 9)': { | |
container: { | |
fontSize: 15, | |
}, | |
}, | |
}); | |
// 5. Also nest inside styles as well | |
StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
'@media ios (aspect-ratio: 16 / 9)': { | |
fontSize: 15, | |
}, | |
}, | |
}); | |
// 6. Platform specific styles | |
StyleSheet.create({ | |
container: { | |
fontSize: 16, | |
}, | |
'@media ios': { | |
container: { | |
fontSize: 15, | |
}, | |
}, | |
'@media android': { | |
container: { | |
fontSize: 14, | |
}, | |
}, | |
}); |
The reason they are implemented in place of all | screen
etc is that the underlying parser already works with that.
The following quote from CSS3 also convinces me to using it:
The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true.
It also has that benefit that we can use a 3rd party parser at the beginning to reduce number of logic that has to be written in order to parse that (in fact, it all works out of the box).
Oh, I see that's good then!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also I like the platform queries but I think it should be something like
this way they look like the others and they can be combined