zoukankan      html  css  js  c++  java
  • 关于vue利用postcss-pxtorem进行移动端适配的问题

    来自 https://www.jb51.net/article/174637.htm 侵删

    1.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack的话只要进行安装即可,不需要另外进行配置,此插件是对px进行转换。

    2.新建一个rem.js的文件,输入以下代码即可,然后在main.js中引用。

    const baseSize = 192;
    // 设置 rem 函数
    function setRem() {
      // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
      // const scale = document.documentElement.clientWidth / 1920
      const scale = document.documentElement.clientHeight / 1920;
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 1) + "px";
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem();
    };
    loaderOptions: {
                postcss: {
                    plugins: [
                        pxtorem({
                            rootValue: 192,
                            propList: ["*"]
                        })
                    ]
                },
                less: {
                    modifyVars: {
                        "font-size-base": "12px"
                    },
                    javascriptEnabled: true
                }
            }, // css预设器配置项
  • 相关阅读:
    iOS中文API之UITouch详解
    iOS中文API之UIResponder介绍
    NSProxy
    NSObject
    Objective-C 简介
    【摘录】在Windows平台上使用Objective-C
    基于VM10+Win7安装Mac OSX10.11 El Capitan
    关于安装黑苹果
    insta经典滤镜下载
    GPUImage简单滤镜使用之色阶(三)
  • 原文地址:https://www.cnblogs.com/Byme/p/15069129.html
Copyright © 2011-2022 走看看