H5问题合集

1.隐藏滚动条

.appearn_conten { overflow:auto;//滚动 }

.appearn_conten::-webkit-scrollbar { display: none;//隐藏滚动条 }

2.CSS 自定义属性在安卓>=4.4的系统怎么兼容

css-vars-ponyfill 是一个非常流行的 Polyfill 库，它可以在不支持 CSS 变量的浏览器中模拟 CSS 变量的功能。通过这个库，你可以让 Android 4.4 及其他不支持 CSS 变量的浏览器正确解析 CSS 变量。

安装 css-vars-ponyfill

1. 首先，安装 css-vars-ponyfill：

   npm install css-vars-ponyfill

2. 然后，在你的应用入口文件中（如 index.tsx 或 App.tsx）引入并初始化 css-vars-ponyfill：

   import cssVars from 'css-vars-ponyfill'; // 在应用初始化时调用 Polyfill cssVars();

3.字体适配H5

import { defineConfig, loadEnv } from "vite";  // 从 Vite 导入 defineConfig 方法，用于定义 Vite 的配置文件
import react from "@vitejs/plugin-react-swc";  // 使用 @vitejs/plugin-react-swc 插件，用于支持 React 的 SWC 编译
import path from "path";  // Node.js 的 path 模块，用于处理文件路径
import legacy from "@vitejs/plugin-legacy";  // 导入 Vite 的 legacy 插件，用于向旧版本浏览器提供兼容性
import pxtovw from 'postcss-px-to-viewport';

//配置参数
const usePxtovw = pxtovw({
    viewportWidth: 750,  //视窗的宽度，对应的是我们设计稿的宽度，一般是750
    viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
    viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    mediaQuery: false       // 允许在媒体查询中转换`px`
})

// 定义 Vite 配置
export default defineConfig(({ command, mode }) => {
    const { VITE_APP_ENV } = loadEnv(mode, process.cwd())

    const targets = isProduction
        ? [ // 生产环境
            "> 1%",  // 支持全球超过 1% 使用率的浏览器
            "last 2 versions",  // 支持每个主流浏览器的最后两个版本
            "not IE <= 8",  // 不支持 IE 8 及以下版本
            "Android >= 4.1",  // 支持 Android 4.4 及以上版本
            "iOS >= 8"  // 支持 iOS 8 及以上版本
        ]
        : [ // 开发环境
            "last 1 chrome version",  // 支持最新的 Chrome 版本
            "last 1 firefox version",  // 支持最新的 Firefox 版本
            "last 1 safari version"  // 支持最新的 Safari 版本
        ];
    return {
        build: {
            target: "es2015",  // 设置打包的目标环境为 ES2015，保证输出的代码兼容较新的浏览器
        },
        plugins: [
            react(),  // 使用 React 的 SWC 插件，以加快 React 代码的编译
            legacy({
                targets,  // 动态设置浏览器目标版本，根据环境选择不同的配置
            }),  // legacy 插件用于提供旧浏览器的支持和兼容性
        ],
        base: VITE_APP_ENV !== 'development'
            ? `https://XXX/`
            : `/`,
        server: {
            host: '0.0.0.0',
            proxy: {
                "/api": {
                    target: "https://xxx", // 本地接口接口请求代理
                    changeOrigin: true,
                    rewrite: (path) => path,
                },
            },
        },
        css: {
            // ...其他配置
            postcss: {
                plugins: [usePxtovw]
            }
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@/api': './src/api',
                '@/assets': './src/assets',
                '@/components': './src/components',
                '@/pages': './src/pages',
                '@/route': './src/route',
                '@/utils': './src/utils',
            }
        },
    }
});