最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
8.40.1. Display elements according to screen size ¶
The following classes display elements based on the device (screen size).
Class | Description |
|---|---|
.show-for-small-only | Display elements only on small devices (screen width less than 40.0625em) |
.show-for-medium-up | Display elements on medium and above devices (screen width greater than 40.0625em) |
.show-for-medium-only | Display elements only on medium-sized devices (screen width between 40.0625em and 64.0625em) |
.show-for-large-up | Display elements on large and above devices (screen width is larger than 64.0625em) |
.show-for-large-only | Display elements only on large devices (screen width between 64.0625em and 90.0625em) |
.show-for-xlarge-up | Display elements on larger devices and above (screen width is larger than 90.0625em) |
.show-for-xlarge-only | Display elements only on larger devices and above (screen width between 90.0625em and 120.0625em) |
.show-for-xxlarge-up | Display elements on very large and above devices (screen width is larger than 120.0625em) |
The following examples demonstrate all of the above .show- Visibility of the class.
你在小型设备上。
你在中型、大型、更大型、超大型的设备上。
你在中型设备上。
你在大型、更大型、超大型的设备上
你在大型设备上。
你在更大型、超大型的设备上。
你在更大型设备上。
你在超大型设备上。
8.40.2. Hide elements according to screen size ¶
The following classes hide elements based on the device (screen size).
Class | Description |
|---|---|
.hide-for-small-only | Hide elements only on small devices (screen width less than 40.0625em) |
.hide-for-medium-up | Hide elements on medium and above devices (screen width is larger than 40.0625em) |
.hide-for-medium-only | Hide elements only on medium-sized devices (screen width between 40.0625em and 64.0625em) |
.hide-for-large-up | Hide elements on large and above devices (screen width is larger than 64.0625em) |
.hide-for-large-only | Hide elements only on large devices (screen width between 64.0625em and 90.0625em) |
.hide-for-xlarge-up | Hide elements on larger devices and above (screen width is larger than 90.0625em) |
.hide-for-xlarge-only | Hide elements only on larger devices and above (screen width between 90.0625em and 120.0625em) |
.hide-for-xxlarge-up | Hide elements on very large and above devices (screen width is larger than 120.0625em) |
8.40.3. Display elements according to screen orientation ¶
The following classes hide elements based on the device (screen size).
We can set whether the element is shown or hidden in different directions. Desktop devices such as laptops are generally horizontal, but mobile phones and tablet devices can be horizontal or vertical. We can set elements to hide and display according to the direction in which the user’s phone is held:
Class | Description |
|---|---|
.show-for-landscape | Show elements at landscape orientation (hidden vertically) |
.show-for-portrait | Show elements in portrait (horizontal hidden) |
The following example displays text content based on the direction in which it is used: 文本只在横向显示。 文本只在纵向显示。Example ¶
8.40.4. Display and concealment of touch screen devices ¶
You can show and hide elements depending on whether the device supports touch or not.
Class | Description |
|---|---|
.show-for-touch | Display on touchscreen-enabled devices (hidden on unsupported devices) |
.hide-for-touch | Hide on devices that support touchscreens (display on unsupported devices) |
The following example displays text content depending on whether the device supports touch: 你的设备支持触屏。Example ¶