Mastering Responsive Layouts: DingTalk PC Client Adaptation Strategies

1. Identify User Device Screen Size Ranges

Responsive layout starts by recognizing the screen size environment and selecting the optimal content presentation. The width range 320‑1920 covers most devices, with common breakpoints at 320, 360, 480, 768, 1024, 1280, 1366, 1440, 1600, and 1920.

Collect the screen sizes of your target users and group them into intervals. For a typical PC client the intervals are:

Interval 1: below 1024

Interval 2: 1024‑1280

Interval 3: 1280‑1366

Interval 4: 1366‑1440

Interval 5: 1440‑1600

Interval 6: 1600‑1920

Interval 7: above 1920

In practice you may simplify to three ranges (≤1366, 1366‑1920, >1920) unless complex components require finer granularity.

2. Set Default and Minimum Window Sizes for Each Interval

Measure the client window dimensions for each breakpoint. DingTalk PC uses two critical sizes: 1024×726 and 975×600. On small screens the window size matches the screen resolution, minus the task‑bar height.

When defining your own defaults, adjust them to ensure essential UI elements remain fully visible (e.g., a minimum height of 620 px to display the sidebar).

3. Choose Content‑Area Scaling Rules

Three common approaches:

Keep side margins constant while the content area stretches with the window – ideal for workbenches and admin panels.

Allow side margins to change but keep the content width fixed – a low‑cost way to support many device sizes.

Hybrid: content stretches up to a certain width, then switches to a fixed width with larger margins.

The hybrid rule is widely used because it balances information density and visual comfort.

4. Define Fixed Dimensions on the Interface

Set fixed spacing between elements and fixed sizes for components such as search bars, banners, and task modules to prevent layout jitter and reduce adaptation effort.

5. Determine Card (Module) Layout Changes

Cards can adapt in three ways:

Position changes – more cards per row on larger windows.

Layout changes – adjust size, shape, and quantity for different breakpoints.

Quantity changes – show fewer items on small screens and reveal more via drawers or pagination.

6. Decide Text Truncation vs. Wrapping

When a container shrinks, either truncate overflow text while keeping container height constant, or allow wrapping which may change the height.

7. Choose Image Cropping vs. Proportional Scaling

Images can be cropped to keep height constant or scaled proportionally. The choice depends on visual balance and the role of the image (e.g., banner vs. content illustration).

8. Summary

Apply the above granular rules to each component, then combine them into a coherent adaptation plan. Understanding these principles lets designers create smooth, device‑agnostic experiences without relying solely on developer conventions.

Happy work and happy life!