• 使用postcss-pxtorem插件实现px转换rem

    一. 使用postcss-pxtorem的方法和流程：

    1.下载postcss-pxtorem(其他插件按需下载自行配置)并在package.json同级目录下新建postcss.config.js文件:

    1. export const defaultHtmlFontSize = 37.5
    2. export default {
    3.   plugins: {
    4.     autoprefixer: {
    5.       overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],
    6.     },
    7.     'postcss-pxtorem': {
    8.       // 根节点的 fontSize 值
    9.       rootValue: defaultHtmlFontSize,
    10.       propList: ['*'],
    11.       selectorBlackList: [':root'],
    12.     },
    13.   },
    14. }

    2.在utils目录下新建rem.ts文件

    1. import {defaultHtmlFontSize} from '../../postcss.config'
    2.  
    3. // 设置 rem 函数
    4. export const setRem = () => {
    5.     // 375 默认字体大小37.5px; 375px = 10rem（px的数值/37.5）
    6.     const designScreenWidth = 375;
    7.     
    8.     const scale = designScreenWidth / defaultHtmlFontSize
    9.     const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    10.     // 得到html的Dom元素
    11.     const htmlDom = document.getElementsByTagName('html')[0]
    12.     // 设置根元素字体大小
    13.     htmlDom.style.fontSize = htmlWidth / scale + 'px'
    14.   }
    15.  
    16. export const initRem = () => {
    17.     // 初始化
    18.     setRem()
    19.     // 改变窗口大小时重新设置 rem
    20.     window.onresize = function() {
    21.         setRem()
    22.     }
    23. }

    3.在main.ts文件调用initRem方法:

    1. import { createApp } from 'vue'
    2. import {createPinia} from 'pinia'
    3. import App from './App.vue'
    4. import router from './router'
    5. import { initRem } from './utils/rem'
    6.  
    7. const app = createApp(App)
    8. app.use(createPinia());
    9. app.use(router)
    10.  
    11.  
    12. // const rootValue = 37.5
    13. // const rootWidth = 375
    14. // const deviceWidth = document.documentElement.clientWidth; // 用户的设备屏幕宽度
    15. // document.documentElement.style.fontSize = (deviceWidth * rootValue / rootWidth) + 'px';
    16. initRem();
    17.  
    18. app.mount('#app')

    设计图要使用375px宽度的,然后直接写px就行了,如果是750的设计图,就/2之后的值,比如border在750的设计图是2px的,在代码中就要写成1px

    使用示例:

    1. <style lang="scss" scoped>
    2. .home-top {
    3.     background: linear-gradient(to right, rgb(53, 200, 250), rgb(31, 175, 243));
    4.     color: white;
    5.  
    6.     .top {
    7.         display: flex;
    8.         align-items: center;
    9.         padding: 10px 10px 0 10px;
    10.         line-height: 15px;
    11.         font-size: 15px;
    12.         font-weight: bold;
    13.     }
    14. }
    15. style>

    按照上面的公式, 375宽度的html的字体大小是37.5px; top类为15px的font-size转换为rem的就是15 / 37.5 = 0.4rem

    750宽度的html的字体大小是75px,top类为15px的font-size转换为rem的还是15 / 37.5 = 0.4rem

    为什么750px宽度的屏幕的rem值没有变化呢?

    (1) rem是相对单位；

    rem单位是相对于HTML标签的字号计算结果；[网页的根标签是：html标签；html字号也叫根字号，根标签字号。]

    1rem = 1HTML字号大小。

    (2) px转rem计算:

    rem(css属性) = px(css属性) / px(html或者body[优先找html]的fontSize);

    反过来rem转化为px就是:

    px(css属性) = rem的数值 * html的fontSize数值;

    如果html标签的font-size是16px，那么1rem就是16px, 而0.4rem就是0.4*16 = 6.4px。

    如果html标签的font-size是20px，那么1rem就是16px, 而0.4rem就是0.4*20 = 8px。

    如果html标签的font-size是37.5px，那么1rem就是37.5px, 而0.4rem就是0.4*37.5 = 15px。

    如果html标签的font-size是75px，那么1rem就是75px, 而0.4rem就是0.4*75 = 30px。

    从计算可知: 750px是375px的2倍,所以计算结果是无误的.

    虽然是vue3项目的示例,但原理都差不多, react项目根据它的代码要求改改应该就能用了.

    二. 不使用postcss-pxtorem插件，改变转化px为rem的方法：

    1. 使用scss的方法转化px为rem：

    1. @function px2rem($px) {
    2. 	$item: 37.5px;
    3. 	@return $px/$item+rem;
    4. }
    5. //使用方式
    6. div {
    7.   width: px2rem(100px);
    8. }

    sass/scss写移动端自适应样式,将px转化为rem-CSDN博客

    2. 使用stylus的方法将px的值转化为rem：

    1. <style scoped lang="stylus">
    2. px2rem(designpx)
    3.   $rem = 37.5px;
    4.   return (designpx / $rem)rem
    5. </style>

    rem自适应原理--vue如何自己利用stylus写rem自适应移动端_stylus 获取屏幕宽度-CSDN博客

    3. 使用less的方法将px值转化为rem：

    Less 的函数全是内置的并不能自定义，所以只能使用混合mixin来实现转换逻辑的复用。

    1. .pxToRem (@px, @attr: width) {
    2.     @rem: (@px / 37.5);
    3.     @{attr}: ~"@{rem}rem";
    4. }
    5.  
    6.  
    7. // Less
    8. .box {
    9.     .pxToVW(75);
    10.     .pxToVW(150, height);
    11. }
    12.  
    13. // CSS
    14. .box {
    15.     width: 2rem;
    16.     height: 4rem;
    17. }

    三. 给html的字体大小赋值的注意事项

    上述几种方法期望的37.5px的html的值都是通过把容器宽度 / 10 + px单位获取的

    推荐做法且是主流做法:

    1. 页面渲染后将html的字体大小设置为容器宽度/10, 加上px单位

    2. resize事件中也重写: 将html的字体大小设置为容器宽度/10, 加上px单位

    不太推荐, 但勉强可用:

    html {

            font-size: 10vw;

    }

    四. 当postcss.config.js文件不起作用时

    1. 直接修改webpack的配置文件:

    修改postcss-loader如下:

    {

    loader: 'postcss-loader',

    options: {

    plugins: [

    require('autoprefixer', {

    overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],

    }),

    require('postcss-pxtorem')({

    // 根节点的 fontSize 值

    rootValue: 37.5, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小

    unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字

    propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性

    // selectorBlackList: [],// （数组）要忽略并保留为 px 的选择器。

    // replace: true, // 替换包含 rems 的规则，而不是添加回退。

    // mediaQuery: true, // 允许在媒体查询中转换 px

    // minPixelValue: 0, // 最小的转化单位

    exclude: "/node_modules|floder_name/i" // 要忽略并保留为 px 的文件路径

    }),

    ]

    }

    },

    1. const path = require('path')
    2. const webpack = require('webpack')
    3. const webpackCommonConf = require('./webpack.common.js')
    4. const { smart } = require('webpack-merge')
    5. const { srcPath, distPath } = require('./paths.js')
    6. const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin')
    7. const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
    8.  
    9. module.exports = smart(webpackCommonConf, {
    10.     mode: 'development',
    11.     module: {
    12.         rules: [
    13.             // 直接引入图片 url
    14.             {
    15.                 test: /\.(png|jpg|jpeg|gif)$/,
    16.                 use: 'file-loader'
    17.             },
    18.             {
    19.                 test: /\.css$/,
    20.                 // loader 的执行顺序是：从后往前
    21.                 loader: ['style-loader', {
    22.                     loader: "css-loader",
    23.                     options: {
    24.                         sourceMap: true,
    25.                         modules: true,
    26.                     },
    27.                 }, {
    28.                     loader: 'postcss-loader',
    29.                 },] // 加了 postcss
    30.             },
    31.             {
    32.                 test: /\.scss$/,
    33.                 // 增加 'less-loader' ，注意顺序
    34.                 loader: ['style-loader',  {
    35.                     loader: "css-loader",
    36.                     options: {
    37.                         sourceMap: true,
    38.                         modules: true,
    39.                     }
    40.                 },
    41.                 {
    42.                     loader: 'postcss-loader',
    43.                     options: {
    44.                         plugins: [
    45.                             require('autoprefixer', {
    46.                                 overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],
    47.                             }),
    48.                             require('postcss-pxtorem')({
    49.                                 // 根节点的 fontSize 值
    50.                                 rootValue: 37.5, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
    51.                                 unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字
    52.                                 propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
    53.                                 // selectorBlackList: [],// （数组）要忽略并保留为 px 的选择器。
    54.                                 // replace: true, // 替换包含 rems 的规则，而不是添加回退。
    55.                                 // mediaQuery: true,  // 允许在媒体查询中转换 px
    56.                                 // minPixelValue: 0, // 最小的转化单位
    57.                                 exclude: "/node_modules|floder_name/i" // 要忽略并保留为 px 的文件路径
    58.                             }),
    59.                         ]
    60.                     }
    61.                 },
    62.                 {
    63.                     loader: "sass-loader",
    64.                 }
    65.             ]
    66.             }
    67.         ]
    68.     },
    69.     // 输出source-map, 方便直接调试es6源码
    70.     devtool: 'source-map',
    71.     plugins: [
    72.         new webpack.DefinePlugin({
    73.             // window.ENV = 'development'
    74.             'process.env': {
    75.                 NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    76.             }
    77.         }),
    78.         // 热更新
    79.         new HotModuleReplacementPlugin(),
    80.         new DllReferencePlugin({
    81.             // 描述react动态链接库的文件内容(告知webpack索引的位置)
    82.             manifest: require(path.join(distPath, 'react.manifest.json')),
    83.         }),
    84.     ],
    85.     devServer: {
    86.         hot: true,
    87.         port: 8111,
    88.         progress: true,  // 显示打包的进度条
    89.         contentBase: distPath,  // 根目录
    90.         open: false,  // true:自动打开浏览器
    91.         compress: true,  // 启动 gzip 压缩
    92.         // 设置代理
    93.         proxy: {
    94.             '/api': 'http://localhost:8000',
    95.             '/api2': {
    96.                 target: 'http://localhost:8111',
    97.                 pathRewrite: {
    98.                     '/api2': ''
    99.                 }
    100.             }
    101.         }
    102.     }
    103. })

    2. 直接在package.json写配置

    如果取修改webpack配置一直没有成功, 可以就在package.json写:

    1. "postcss": {
    2.     "plugins": {
    3.       "autoprefixer": {},
    4.       "postcss-pxtorem": {
    5.         "rootValue": 37.5,
    6.         "propList": ["*"],
    7.         "exclude": "/node_modules|floder_name/i"
    8.       }
    9.     }
    10.   }

  • 相关阅读:
    解决linux设置的免密登录还是提示需要密码登录
    网络复习题带答案
    复制粘贴是怎么实现的
    python3通过winrm远程执行windows服务器dos命令
    Ruoyi集成flyway后启动报错的解决方法
    今年的计算机专业应届生居然也找不到工作了？
    Excel怎么批量生成文件夹
    计算机毕业设计Java大学生科技创新项目管理系统(源码+系统+mysql数据库+lw文档)
    【VS2017】MIDL : CreateFile() error : 2
    Druid连接池最小连接数设置失效问题
  • 原文地址：https://blog.csdn.net/qq_42750608/article/details/133134873