Difference between revisions of "Multiple Resolutions"
(Created page with "Screens now have a very wide range of resolutions and pixel densities (e.g. Retina), particularly on mobile devices. If you would like your UI to display at similar physical s...") |
|||
| Line 2: | Line 2: | ||
This has the effect of automatically setting CSS zoom which scales the underlying CSS pixel unit (it's not the same as a transform scale, as things like percent units are unaffected). | This has the effect of automatically setting CSS zoom which scales the underlying CSS pixel unit (it's not the same as a transform scale, as things like percent units are unaffected). | ||
| + | |||
| + | == Media queries == | ||
| + | |||
| + | PowerUI supports [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries media queries] so you can very broadly affect your layout based on the current screen size and various other platform properties. | ||
== Responsive Images == | == Responsive Images == | ||
PowerUI implements the draft [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images responsive images] specification which can be used to automatically switch images based on the current platforms screen density. | PowerUI implements the draft [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images responsive images] specification which can be used to automatically switch images based on the current platforms screen density. | ||
Latest revision as of 01:13, 13 March 2017
Screens now have a very wide range of resolutions and pixel densities (e.g. Retina), particularly on mobile devices. If you would like your UI to display at similar physical sizes (or at least, as close as possible) across those screens simply tick the automatically handle dpi option in the PowerUI manager.
This has the effect of automatically setting CSS zoom which scales the underlying CSS pixel unit (it's not the same as a transform scale, as things like percent units are unaffected).
Media queries
PowerUI supports media queries so you can very broadly affect your layout based on the current screen size and various other platform properties.
Responsive Images
PowerUI implements the draft responsive images specification which can be used to automatically switch images based on the current platforms screen density.
