面试题：Qwik中如何实现基本的响应式布局以适配多种设备

1. 使用CSS媒体查询

原理：CSS媒体查询是一种在不同设备屏幕尺寸下应用不同样式的标准方法。在Qwik项目中，可以在CSS文件中定义媒体查询规则。
示例：

/* 当屏幕宽度小于等于600px（通常为手机屏幕）时 */
@media (max - width: 600px) {
  .element - to - hide - on - mobile {
        display: none;
    }
  .font - for - mobile {
        font - size: 14px;
        line - height: 1.5;
    }
}

/* 当屏幕宽度大于600px且小于等于1024px（通常为平板屏幕）时 */
@media (min - width: 601px) and (max - width: 1024px) {
  .element - to - hide - on - tablet {
        display: none;
    }
  .font - for - tablet {
        font - size: 16px;
        line - height: 1.6;
    }
}

/* 当屏幕宽度大于1024px（通常为桌面屏幕）时 */
@media (min - width: 1025px) {
  .element - to - hide - on - desktop {
        display: none;
    }
  .font - for - desktop {
        font - size: 18px;
        line - height: 1.7;
    }
}

2. 利用Qwik的响应式布局指令

Qwik City布局约定：Qwik City提供了一种布局约定，可以根据不同的屏幕尺寸动态加载不同的布局组件。例如，可以创建不同的布局文件，如layout.mobile.tsx、layout.tablet.tsx和layout.desktop.tsx，然后Qwik会根据设备的屏幕尺寸自动选择合适的布局。
示例：

// layout.mobile.tsx
import { component$, useStyles } from '@builder.io/qwik';

const MobileLayout = component$(() => {
    const classes = useStyles(styles);
    return (
        <div className={classes.mobile - layout}>
            {/* 手机布局内容 */}
        </div>
    );
});

const styles = `
  .mobile - layout {
        padding: 10px;
    }
`;

export default MobileLayout;

3. 动态样式生成

使用Qwik的useStyles和JavaScript逻辑：可以在Qwik组件中通过useStyles函数结合JavaScript逻辑来动态生成适应不同屏幕尺寸的样式。
示例：

import { component$, useStyles } from '@builder.io/qwik';

const ResponsiveComponent = component$(() => {
    const isMobile = typeof window!== 'undefined' && window.innerWidth <= 600;
    const classes = useStyles(() => `
      .responsive - element {
            ${isMobile? 'font - size: 14px; padding: 5px' : 'font - size: 16px; padding: 10px'}
        }
    `);
    return (
        <div className={classes.responsive - element}>
            {/* 组件内容 */}
        </div>
    );
});

export default ResponsiveComponent;

4. 第三方响应式库

原理：可以引入像Tailwind CSS这样的第三方响应式库。Tailwind CSS提供了一套预先定义好的类，用于快速创建响应式布局。
示例：

<div class="hidden md:block">
    <!-- 在桌面及以上屏幕显示，手机和平板隐藏 -->
</div>
<div class="text - sm md:text - lg">
    <!-- 手机屏幕上字体小，桌面及以上屏幕字体大 -->
</div>

星途面试题库

面试题：Qwik中如何实现基本的响应式布局以适配多种设备

知识考点

面试题答案

1. 使用CSS媒体查询

2. 利用Qwik的响应式布局指令

3. 动态样式生成

4. 第三方响应式库