css中rem的适配，css字体包使用

css字体包使用

@font-face {
    font-family: 'aliheiti';  /* aliheiti 是自定义的名字，使用的时候就用这个名字 */
    src: url('./diyfont.eot'); /* IE9+  diyfont.eot为字体文件 */
    src: url('./diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./diyfont.woff') format('woff'), /* chrome、firefox */
    url('./diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('./diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

使用

.test{
	font-family: aliheiti
}

pc端vue项目配置rem (vue-cli5, 其它版本自行百度，vue-cli3不通用)

1、安装 postcss-loader， postcss-px-to-viewport

yarn add postcss-loader postcss-px-to-viewport

2、在vue.config.js 配置文件中配置如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-px-to-viewport',
                            {
                                unitToConvert: 'px',    // 需要转换的单位，默认为"px"
                                viewportWidth: 1920,     // 设计稿的视窗宽度
                                unitPrecision: 5,       // 单位转换后保留的精度
                                viewportUnit: 'rem',     // 希望使用的视窗单位
                                fontViewportUnit: 'rem', // 字体使用的视窗单位
                                selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
                                minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
                                mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
                                replace: true,          // 是否直接更换属性值，而不添加备用属性
                                exclude: /\/node_modules\//,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
                                include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
                                landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
                                landscapeUnit: 'rem',    // 横屏时使用的单位
                                landscapeWidth: 1125,   // 横屏时使用的视窗宽度
                            },
                        ],
                    ],
                },
            }
        }
    }
})

到此跑起来项目看看项目中写的px单位就都转成了rem单位了， 只是变化窗口的大小不生效， 需要新建一个文件在main入口文件中引用

3、新建setRem.js文件，也有现成的 淘宝无线适配

export const setDomFontSize  = () => {
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    let fontSize = (width < 1200 ? 1200 : width) / 100 * 0.521 + "px";  // 设置最小字体是12， 因为谷歌浏览器最小字体是12px  乘以0.521是因为10px转换成1rem
    document.getElementsByTagName("html")[0].style.fontSize = fontSize;  // 给html设置fontSize根大小， 因为rem是相对根的fontSize自动适配大小的
}

window.addEventListener("resize", setDomFontSize);  // 监听窗口的变化

4、在mainjs入口文件中引入使用

import { setDomFontSize } from "./setRem.js"
setDomFontSize();