1.基于tailwind(配合nuxt3框架使用)

个人总结一下，目前感觉如果没有设计稿约束的话，可以直接用响应式布局的框架，如tailwind
但是如果严格按照设计稿来做的话，tailwind的样式可能不够用，所以要自定义很样式，这个可能是tailwind的一大弊端吧
tailwind弊端:
Tailwind CSS虽然好用，但是它有一个非常大的缺点，就是它自身提供的类名是非常有限的，并且它的默认单位是rem，这就导致如果一个项目要严格按照设计稿的尺寸来编写，它需要你手动添加大量的样式，也就是如果一个盒子的宽是375px，虽然你可以使用蓝湖这一类的工具将设计稿转换为rem为单位，375px如果按照16px的基准来转换就是23.4375rem。如果你需要严格参照设计稿，那么你就必须手动在tailwind.config.js文件中添加93.75: "23.4375rem"这一类的参数，如果你每次都要这么进行计算的话，那会是一个非常麻烦的事情，这个时候你会想：直接在tailwind.config.js文件中将1px~2000px全部添加进去不就好了嘛！

事实上是不行，tailwind.config.js文件中，你预设的样式越多，你项目启动的速度就会越慢，因为它会通过postcss进行大量的计算，我尝试过将1px~2000px全部填入配置文件中，每次启动项目的时间大概是在2~3分钟左右。

我在项目中直接没有使用tailwind的样式类库，只用了基本的几个，如:container 其他的都直接写到vue页面的 scope 范围内。基于scss语法 rem 单位。

2.普通网站处理

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机 m站
 } else {
    window.location.href = "";     //电脑 www站
 }

3.如何在Nuxt3中检测用户设备并加载相应的用户界面？ 上面说了，如果严格按照设计稿来做的话，就需要www 和 m 站各处一套设计稿，对应的样式可能就有两套，页面也有两套，就需要根据用户当前设备来加载相应的界面了 这里使用：mobile-detect 这个js包

安装(基于:https://github.com/hgoebl/mobile-detect.js):

npm i mobile-detect / yarn add mobile-detect

使用: plugins/device.ts 中import 报错： can only be default-imported using the 'esModuleInterop' flag

import {defineNuxtPlugin, useRequestHeaders} from '#app';
import * as  MobileDetect from 'mobile-detect'; // 这样import就不会有问题了

export default defineNuxtPlugin(() => {
    let headers = useRequestHeaders()

    const md = process.server ? new MobileDetect(headers['user-agent']) : new MobileDetect(navigator.userAgent)
    const isMobile = md.phone() !== null || md.mobile() === 'UnknownMobile'
    const isTablet = md.tablet() !== null || md.mobile() === 'UnknownTablet'
    const isDesktop = !isMobile && !isTablet

    return {
        provide: {
            isMobile: () => isMobile,
            isTablet: () => isTablet,
            isDesktop: () => isDesktop
        },
    };
})

但是上面的代码运行以后会报：vite_ssr_import_1 is not a constructor 所以还是改为 plugins/device.js 格式：

import {defineNuxtPlugin, useRequestHeaders} from '#app';
import MobileDetect from 'mobile-detect';

export default defineNuxtPlugin(() => {
    let headers = useRequestHeaders()

    const md = process.server ? new MobileDetect(headers['user-agent']) : new MobileDetect(navigator.userAgent)
    const isMobile = md.phone() !== null || md.mobile() === 'UnknownMobile'
    const isTablet = md.tablet() !== null || md.mobile() === 'UnknownTablet'
    const isDesktop = !isMobile && !isTablet

    return {
        provide: {
            isMobile: () => isMobile,
            isTablet: () => isTablet,
            isDesktop: () => isDesktop
        },
    };
})

4.项目中使用(判断了$isMobile，就可以加载不同的页面了)

<template>
  <div v-if="$isMobile()" > show on mobile </div>
  <div v-else > show on pc </div>
</template>