# MultiWeb

**Repository Path**: cencus/MultiWeb

## Basic Information

- **Project Name**: MultiWeb
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2025-01-10
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web-Based Responsive Layout Development


## Overview
This sample demonstrates how to implement common web effects, such as font size adjustment, image size adjustment, grid layout, carousel layout, and custom dialog box, based on web capabilities for multi-device adaptation, such as relative unit, media query, and window event. Such integrated web capabilities can provide a good user experience on multiple devices.

## Preview

| BreakPoint | sm                                                       | md                                                          | lg                                                        |
|---------|----------------------------------------------------------|-------------------------------------------------------------|-----------------------------------------------------------|
| Final effect        | <img src='./screenshots/devices/phone.en.png' width=320> | <img src='./screenshots/devices/foldable.en.png' width=480> | <img src='./screenshots/devices/tablet.en.png' width=800> |


## Project Directory

```
├──WebProject                           // Web project
├──entry/src/main/ets/
│  ├──entryability
│  │  └──EntryAbility.ets               // Entry ability
│  ├──entrybackupability  
│  │  └──EntryBackupAbility.ets  
│  └──pages              
│     └──Index.ets                      // Page entry
└──entry/src/main/resources             // Static resources of the application
```

## How to Use
This project is a Web multi-example, which realizes that the font and image sizes can be automatically adjusted to appropriate dimensions on different device sizes. Meanwhile, this project has made multi-layout adaptations for common scenarios such as carousels, grids, and pop-ups. Developers can run this program on different devices to view the layout effects.

## How to Implement

1. Use media query to set element attributes, such as font size and image size.
2. Dynamically adjust the size of each carousel image and the carousel distance at a time to implement different carousel effects.
3. Use media query to set different numbers of columns and spacing at different breakpoints to implement different grid effects.
4. Use media query to set different size of dialog boxes at different breakpoints.

## Permissions

N/A

## Constraints
1. The sample app is supported only on Bar phone, Bi-fold phone(Mate X series) and Tablet running the standard system.
2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later.
3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later.
4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release SDK or later.