DEV Community

Cover image for The responsive design of HarmonyOS Next
liu yang
liu yang

Posted on

The responsive design of HarmonyOS Next

#harmonyosnext

HarmonyOS Next Responsive Design Core Concepts and Practical Techniques

I. Core Concepts of Responsive Design in HarmonyOS Next

HarmonyOS Next employs adaptive layouts and media queries to dynamically adjust application interfaces across various device types (phones, tablets, foldables) and screen sizes. The core goals are:

  • Multi-Device Consistency: Develop once to support multiple devices like phones, tablets, and smart screens.
  • Dynamic Sensing: Automatically adjust layouts based on screen size changes and orientation shifts.

II. Layout Adjustments Based on Device Type

1. Device Type Identification and Adaptation Strategy

HarmonyOS Next identifies device types via the deviceType property, allowing developers to design specific layouts for different devices:

  • Phone: Prioritize single-column layouts with compact components.
  • Tablet: Utilize multi-column layouts to leverage larger screens.
  • Foldable: Switch display modes based on the fold state.

Example: Device Type Check

import { deviceType } from '@ohos.deviceInfo';
if (deviceType === 'tablet') {
  // Tablet layout logic
} else if (deviceType === 'phone') {
  // Phone layout logic
}
Enter fullscreen mode Exit fullscreen mode

2. Recommended Adaptive Layout Components

  • Flex Layout: Control child component scaling with flexGrow and flexShrink.
  • GridRow Grid System: Supports breakpoints like xs, sm, md for automatic column adjustments.
  • List and Swiper: Display multiple items horizontally on tablets and vertically scrollable on phones.

III. Practical Media Query Techniques

Core Features of Media Queries

  • Dynamic Breakpoint Listening: Update layouts based on window width and orientation.
  • Multi-Condition Combinations: Evaluate features like device type, color mode, and resolution.

Basic Syntax Example 

import mediaquery from '@ohos.mediaquery';
let condition = '(min-width: 600vp) and (orientation: landscape)';

mediaquery.matchMedia(condition, (result) => {
  if (result.matches) {
    // Apply large-screen landscape layout
  }
});
Enter fullscreen mode Exit fullscreen mode

Typical Use Cases

  • Orientation Change Adaptation 
mediaquery.matchMedia('(orientation: portrait)', (result) => {
  if (result.matches) {
    // Portrait layout: Single column
  } else {
    // Landscape layout: Dual columns
  }
});
Enter fullscreen mode Exit fullscreen mode
  • Foldable State Detection 
mediaquery.matchMedia('(min-width: 840vp)', (result) => {
  if (result.matches) {
    // Expanded state: Display extended content
  }
});
Enter fullscreen mode Exit fullscreen mode

IV. Best Practices for Responsive Design

Breakpoint Rules Suggestions

Breakpoint Name Window Width Range Applicable Devices
xs < 320vp Small-screen phones
sm 320vp - 599vp Regular phones
md 600vp - 839vp Tablets/Foldables
lg ≥ 840vp Expanded tablets/Large screens

Data referenced from HarmonyOS official grid system.

Performance Optimization Tips

  • Avoid Over-Listening: Enable media query listeners only when necessary and release resources promptly.
  • Component Reusability: Encapsulate reusable responsive components with @Builder.

V. Summary

HarmonyOS Next enhances multi-device development efficiency through device type adaptation and media queries:

  1. Layout Strategy Selection:

    • Adaptive layouts are suitable for continuous size changes (e.g., window resizing).
    • Responsive layouts are better for discrete breakpoint switches (e.g., phone/tablet differences).

  2. Development Principles:

    • Prioritize grid systems (GridRow) and flexible layouts (Flex), combined with media queries for fine-tuned control.

Top comments (0)