屏幕缩放、扩大，网页自适应

在 React 项目中，如果希望页面在小屏幕设备上以 80% 的缩放比例显示，可以使用 CSS 的 transform: scale()或者通过 zoom 属性来实现。为了确保能够根据屏幕大小自动调整，我们可以结合 JavaScript 来动态应用这些样式。

以下是一个简单的示例，展示了如何在小屏幕电脑上应用缩放效果：

import React, { useEffect } from 'react';
import './App.css';

function App() {
    useEffect(() => {
    const adjustScale = () => {
    const width = window.innerWidth;

    // 设定小于768px为小屏幕设备
    if (width < 768) {
        document.body.style.transform = 'scale(0.8)';
        document.body.style.transformOrigin = 'top left'; // 确保从左上角缩放
        document.body.style.width = '125%'; // 因为缩放导致的宽度减少
    } else {
        document.body.style.transform = 'none'; // 大屏幕不缩放
        document.body.style.width = '100%'; // 恢复正常宽度
    }
    };
  
    // 初始化和窗口大小改变时调用
    adjustScale();
    window.addEventListener('resize', adjustScale);

    return () => {
        window.removeEventListener('resize', adjustScale); // 清理事件监听器
        };
    }, []); 
return (
    <div className="App">
    <h1>欢迎来到零声教育</h1>
    <p>这个页面将在小屏幕电脑上以 80% 的比例显示。</p>
    </div>
    );
}
export default App;

CSS

.App {
    padding: 20px;
    font-family: Arial, sans-serif;
}

示例说明

1. React 组件：创建一个基本的 React 函数组件，并在其中使用 useEffect 钩子来添加和清除事件监听器。

2. 窗口调整：adjustScale 函数会检查窗口的宽度。如果宽度小于 768 像素（你可以根据需要更改这个值），则将页面缩放到 80%。否则，将其恢复到原始状态。

3. CSS 样式：

   • 使用 .App 类定义基础样式，包括内边距和字体。

注意事项

• 使用 transform: scale() 会影响布局，因此我们将 width 设置为更大的值以弥补缩放带来的影响。这通常是必要的，以防止内容被裁剪或位置不正确。
• 确保测试不同尺寸的设备，以便查看它们如何响应。
• 在实际项目中，可以根据设计需求进一步调整样式和逻辑。