單位

Resolution Independence Approach

The objective of resolution independence is to make it easy for graphical user interfaces in Ubuntu Touch to scale to all the form factors that Ubuntu Touch targets: phones, tablets, laptops and desktops. The approach taken combines simplicity for the designers and developers with visual fidelity, quality and usability.

測量單位

網格單位

A measurement unit called the grid unit is defined, abbreviated gu. 1 grid unit translates to a given number of pixels depending on the type of screen that the user interface is displayed on. For example, on a laptop computer 1 grid unit will typically translate to 8 pixels. The number of pixels per grid unit is chosen in order to preserve the perceived visual size of UI elements and therefore depends on the density of the display and the distance the user is to the screen. We also ensure that 1 grid unit is always an integer number of pixel.

Device

轉換

大多數筆記型電腦

1 gu = 8 px

高畫質筆記型電腦

1 gu = 16 px

Phone with 4 inch screen at HD resolution (around 720x1,280 pixels)

1 gu = 18 px

Tablet with 10 inch screen at HD resolution (around 720x1,280 pixels)

1 gu = 10 px

密度單位

Exceptionally, in order to accommodate for the rare cases where measurements of less than 1 gu are needed another unit is available: the density independent pixel, abbreviated dp. 1 dp typically translates to 1 pixel on laptops and low density mobile phones and tablets.

使用

Item {
  width:  units.gu(2)
  height: units.dp(1)
}

裝置尺寸

裝置網格單位

寬度

高度

E5 (頭像)

42

72

M10 HD (景觀)

160

97

M10 FHD (景觀)

148

89

N5 (頭像)

47

80