Files:
Images:
Using device independent measurement units.
This example demonstrates how to use device independent measurement units. In this example we are using millimeters for as an device independent measurement unit.
For more details, see: Scalable Measurements and Rounding
Firstly, we define a helper function for calculating pixels per millimeters from dots per inch (dpi) of the screen. We apply rounding to ensure that the calculated value is an integer number of pixels, see the Rounding of Measurements example for more information.
function millimetersToPixels(number) { return Math.round(number * screen.dpi / 25.4); }
Then, define font size for the example in millimeters.
var fontSize = millimetersToPixels(5)
And same thing for image width.
var imageWidth = millimetersToPixels(40);
The snippet below scales the Image element with defined image size.
Image { id: image width: ScalableUI.imageWidth anchors.horizontalCenter: parent.horizontalCenter source: "images/Qt_logostrap_CMYK.png" fillMode: Image.PreserveAspectFit smooth: true }
Similarly we scale font size of the Text element.
Text { id: text text: "Hello QtQuick" color: "white" font.pixelSize: ScalableUI.fontSize anchors.top: image.bottom anchors.horizontalCenter: parent.horizontalCenter }