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;
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值