屏幕变量

引入 antd 变量文件，里面预定义了各个屏幕的变量

@import '~antd/es/style/themes/default.less';

可以看到以下就是各类型变量的定义：

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
// ? Extra small screen / phone

// ? Small screen / tablet
@screen-sm: 576px;
// Medium screen / desktop
@screen-md: 768px;// Large screen / wide desktop
@screen-lg: 992px;
// Extra large screen / full hd
@screen-xl: 1200px;
// Extra extra large screen / large desktop
@screen-xxl: 1600px;

不同屏幕下不同样式

• 先写大屏效果后写大屏效果： max-width 当视窗宽度小于或等于指定值时
• 先写小屏效果后写大屏效果： min-width 当视窗宽度大于或等于指定值时
• 因为css优先级，使用min-width作为判断条件一定要从小到大，max-width反之

不同屏幕下的，多个样式的不同效果：

@media (min-width: @screen-md) {
  .container {
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
  }

  .content {
    padding: 32px 0 24px;
  }
}

也可以在单个样式的属性定义中插入，嵌套的写法：

.main {
  width: 328px;
  margin: 0 auto;
  @media screen and (max-width: @screen-sm) {
    width: 95%;
    max-width: 328px;
  }
}

通过hook获取当前处于移动端

通过查看 layout 库左侧菜单相关文件，发现调用了 antd 封装的 hook

import useAntdMediaQuery from 'use-media-antd-query';

const colSize = useAntdMediaQuery();
const isMobile = colSize === 'sm' || colSize === 'xs';

基于这个方式，可以进一步封装为自定义 hook 进行适用。与 antd 的 css 响应式保持一致的屏幕尺寸，开展自适应。