侧边栏布局和响应式布局的对比（Semi Design）

1. 布局结构

侧边栏布局：
- 通常将页面分为侧边栏（Sider）和主要内容区域（Content）。
- 侧边栏通常用于导航、菜单或其他辅助功能，而主要内容区域用于展示核心内容。
- 在你的代码中，Silider 组件就是一个典型的侧边栏布局，侧边栏固定在左侧，右侧是 Header、Content 和 Footer。
响应式布局：
- 响应式布局是指页面能够根据不同的屏幕尺寸或设备自动调整布局和样式。
- 在你的代码中，Silider2 组件使用了响应式布局的特性，通过 breakpoint 属性设置了断点，当屏幕宽度小于等于 md 时，侧边栏会自动隐藏。

2. 响应式处理

侧边栏布局：
- 侧边栏布局本身并不一定具备响应式特性。它可能在不同屏幕尺寸下保持固定的布局，导致在小屏幕上内容显示不全或布局混乱。
- 例如，Silider 组件中的侧边栏宽度是固定的 120px，无论屏幕尺寸如何变化，侧边栏的宽度都不会改变。
响应式布局：
- 响应式布局会根据屏幕尺寸的变化自动调整布局。例如，当屏幕宽度小于某个断点时，侧边栏可以隐藏或折叠，以适应小屏幕设备。
- 在 Silider2 组件中，通过 breakpoint 属性设置了断点 ['md']，当屏幕宽度小于等于 md 时，侧边栏会自动隐藏，从而适应小屏幕设备。

3. 断点处理

侧边栏布局：
- 侧边栏布局通常不涉及断点处理，布局是静态的，不会根据屏幕尺寸变化而改变。
- 例如，Silider 组件中没有使用 breakpoint 属性，侧边栏的显示和隐藏不会根据屏幕尺寸变化。
响应式布局：
- 响应式布局通常使用断点来处理不同屏幕尺寸下的布局变化。通过设置断点，可以在不同屏幕尺寸下应用不同的样式或行为。
- 在 Silider2 组件中，通过 breakpoint 属性设置了断点 ['md']，并且通过 onBreakpoint 回调函数可以监听断点的触发情况。

4.侧边栏布局代码：

复制代码

import { Layout } from "@douyinfe/semi-ui";
//侧边布局
const Silider = () => {
  const { Header, Footer, Sider, Content } = Layout;
  const commonStyle = {
    height: 64,
    lineHeight: '64px',
    textAlign: 'center',
    width: 1300,
    background: 'var(--semi-color-fill-0)'
  };
  return (
    <Layout className="components-layout-demo" style={
  
  { margin: '0 auto 0 50px' }}>
      <Sider style={
  
  { width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>
      <Layout>
        <Header style={commonStyle}>Header</Header>
        <Content style={
  
  { height: 300, lineHeight: '300px' }}>Content</Content>
        <Footer style={commonStyle}>Footer</Footer>
      </Layout>
    </Layout>
  );
};

export default Silider;

5. 响应式布局代码展示：

复制代码

import { Layout } from "@douyinfe/semi-ui";

const Silider2 = () => {
  // screen: 屏幕类型，bool: 是否满足断点
  const onbreakpoint = (screen, bool) => {
    console.log(screen, bool);
  };
  const commonStyle = {
    height: 64,
    textAlign: 'center',
    lineHeight: '64px',
    background: 'var(--semi-color-fill-0)'
  };
  const { Header, Footer, Sider, Content } = Layout;
  return (
    <Layout className="components-layout-demo" style={
  
  { margin: '0 auto 0 50px' }}>
      <Header style={commonStyle}>Header</Header>
      <Layout>
        <Sider
          style={
  
  { width: '120px', background: 'var(--semi-color-fill-2)', textAlign: 'center' }}
          // 设置断点，当屏幕宽度小于等于 md 时，将侧边栏隐藏
          breakpoint={['md']}
          // 设置断点后，当断点触发时，会触发 onBreakpoint 回调
          onBreakpoint={onbreakpoint}
        >
          Sider
        </Sider>
        <Content style={
  
  { height: 300, lineHeight: '300px', textAlign: 'center' }}>Content</Content>
      </Layout>
      <Footer style={commonStyle}>Footer</Footer>
    </Layout>
  );
};

export default Silider2;

6.效果图（注：在本图片中，上图为侧边栏效果展示图，下图为响应式效果展示图）

tips：如何将两个页面的内容展示在一起，可以在main.jsx中使用div来实现

复制代码

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import Silider from './LayOut/Silider'
import Silider2 from './LayOut/Silider2.0'
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <div>
      <Silider />
      <br />
      <Silider2 />
    </div>
  </StrictMode>,
)