pc端大屏项目适配方案

方法一：使用sass 帮助我们执行换算

导入一段js代码，也可以封装成函数，最好是把小数保留，应为最终是需要还原成rem值，以免出现不必要的像素值差。
这里由1200分辨率分两步，低于1200分辨率按1200算。
计算出 Desktop 值被除值即可：1920 / 120 = 16(px); 当然16px是最理想的单位。这个缩放比可用于在js里面实现js的rem转换值

    // 修改根元素fontsize
      let width = window.innerWidth
      width = width <= 1200 ? 1200 : width
      const htmlObj = document.getElementsByTagName('html')[0]
      htmlObj.style.fontSize = width / 120 + 'px'

      if (document.createEvent) {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
      } else if (document.createEventObject) {
        window.fireEvent("onresize");
      }

      window.addEventListener('resize', function () {
        let width = window.innerWidth;
        htmlObj.style.fontSize = width / 120 + 'px'
      });

在全局的reset文件中设置好比率，这里使用sass函数方式、后续直接调用即可

<script>
	window.px2rem = px => px / (1920 / 120) + 'rem'; // 可以给window挂载一个全局方法，方面使用js使用去计算逻辑性dom的rem值
</script>

<style lang="scss">
    @function px2rem($px){
        $ratio: 1920 / 120; // 缩放比   16
        @return $px / $ratio + rem;
    }

    font-size: px2rem(16); // 调用函数内直接传实际的px值即可 表示16px的字号
</style>

方法二：使用 postcss-pxtorem 自动帮我们转换

npm i postcss-pxtorem -D; ## 安装 postcss 并且创建 postcss.config.js文件
// postcss.config.js 
    module.exports = {
      plugins: {
        'autoprefixer': {
          overrideBrowserslist: [
	        "last 2 versions",
	        "Android >= 4.0",
	        "iOS >= 8"
	      ]
        },
        'postcss-pxtorem': {
          rootValue: 16,
          propList: ['*']
        },
      },
    };

    // 这段代码它又来了，完全可以单独丢一个js文件里面。
      let width = window.innerWidth
      width = width <= 1200 ? 1200 : width
      const htmlObj = document.getElementsByTagName('html')[0]
      htmlObj.style.fontSize = width / 120 + 'px'

      if (document.createEvent) {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
      } else if (document.createEventObject) {
        window.fireEvent("onresize");
      }

      window.addEventListener('resize', function () {
        let width = window.innerWidth;
        htmlObj.style.fontSize = width / 120 + 'px'
      });

// 页内使用直接
    height:	40px;
    font-size: 30px;

最后

以上就是激昂翅膀为你收集整理的pc端大屏项目适配方案的全部内容，希望文章能够帮你解决pc端大屏项目适配方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。