前端屏幕适配

Bootstrap

包含六个默认断点，有时也称为网格层，用于响应式构建。如果您使用我们的源 Sass 文件，则可以自定义这些断点。

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

module.exports = { 
    theme: { 
        screens: { 
        'sm': '576px', 
        'md': '768px', 
        'lg': '992px', 
        'xl': '1200px', 
        'xxl': '1400px' 
     }, 
     // 其他主题相关配置（可根据项目需求添加或修改） 
     }, 
     variants: {}, 
     plugins: [] 
 };

react-device-detect

react-device-detect是一个非常有用的 NPM 包，它可以帮助你在 React 应用中轻松地检测设备类型（如桌面端、移动端、平板端）。这个包通过分析用户代理（User - Agent）字符串来确定设备类型。

import { isMobile, isTablet, isDesktop } from 'react-device-detect';
const MyComponent = () => { 
if (isDesktop()) { 
    return <div>这是PC端内容</div>; 
} 
else if (isTablet()) { 
    return <div>这是平板端内容</div>; 
} 
else if (isMobile()){ 
    return <div>这是移动端内容</div>; } 
};

react- responsive

react - responsive提供了一种基于媒体查询的方式来处理响应式设计，并且可以方便地在 React 组件中使用。它允许你根据设备的屏幕尺寸来有条件地渲染组件或者应用不同的样式。

import { useMediaQuery } from 'react-responsive';
const isMobile = useMediaQuery({ maxWidth: 767 });