PC端移动端

• 网站实现PC端跟移动端适配

1. 响应式(通过对单位px转换rem来对页面做适配)

   npm install amfe-flexible postcss-pxtorem -D
   
   // main.js中引入amfe-flexible
   import 'amfe-flexible' // rem 布局适配
   
   
   // vite.config.js中引入插件及配置
   import { resolve } from 'path';
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import postCssPxToRem from 'postcss-pxtorem'
   
   const pathResolve = (dir) => {
     return resolve(__dirname, ".", dir)
   }
   
   const alias = {
     '@': pathResolve("src"),
     "@assets": resolve(__dirname, "src/assets"),
     "~assets": resolve(__dirname, "src/assets"),
   }
   /************************************* 路径配置 ********************************/
   export default defineConfig({
     plugins: [vue()],
     ssr: false,
     base: './',
     resolve: { alias },
     build: {
       target: 'modules',//浏览器兼容性  "esnext"|"modules"
       outDir: 'dist', //指定输出路径
       assetsDir: 'assets', // 指定生成静态资源的存放路径
     },
     css: {
       // 配置 CSS modules 的行为。选项将被传递给 postcss-modules
       modules: {},
       // 内联的 PostCSS 配置（格式同 postcss.config.js）
       postcss: {
         plugins: [
           postCssPxToRem({
             rootValue:75, // 1rem 的大小
             propList: ['*'], // 需要转换的属性，*(全部转换)
             unitPrecision: 6, // 转换精度，保留的小数位数
             selectorBlackList: []
           })
         ]
       }
     },
     server: {
       https: false,
       hrm: true,
       port: 8080,//本地端口
       host: '0.0.0.0',
       proxy: {//反向代理配置
         '/api': {
           target: 'http://localhost:8090/',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     }
   })

2. 媒体查询(通过css根据尺寸的大小来写不同尺寸的样式)

   /*------------------媒体查询响应式布局------------------*/
   // 大于751时
   @media screen and (min-width: 751px) {
    
   }
   
   // 小于750时
   @media screen and (max-width: 750px) {}

3. 直接开发两套，根据JS进行判断，加载其中一套实现(利于维护)

   <script type="text/javascript">
      var os = function () {
          var ua = navigator.userAgent,
          isWindowsPhone = /(?:Windows Phone)/.test(ua),
          isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
          isAndroid = /(?:Android)/.test(ua),
          isFireFox = /(?:Firefox)/.test(ua),
          isChrome = /(?:Chrome|CriOS)/.test(ua),
          isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid &&       !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
          isPhone = /(?:iPhone)/.test(ua) && !isTablet,
          isPc = !isPhone && !isAndroid && !isSymbian;
          
          return {
                 isTablet: isTablet,
                 isPhone: isPhone,
                 isAndroid: isAndroid,
                 isPc: isPc
          };
      }();
   
      // pc时加载一套页面
      if(os.isPc){
         location.replace("http://www.onlymid.com.cn/"); 
      }
          
      // 移动端时加载另外一套页面 
      if (os.isAndroid || os.isPhone) { 
         location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');
      } else if (os.isTablet) {
         location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');
      }
   </script>