zoukankan      html  css  js  c++  java
  • 一种简单的 rem 单位基准设置

    1rem 换算成的像素值等于 html 元素的 font-size 值

    如果 设置 html 的 font-size 为 100px, 那么设计稿的 像素转换成 rem 只需要除以 100 即可。

    function setRem(designWidth, maxWidth) {
          var htmlElm = document.documentElement;
          var pageWidth = htmlElm.getBoundingClientRect().width;
          pageWidth = Math.min(pageWidth ,maxWidth || designWidth);
          var rempx = 100*pageWidth/designWidth;
          htmlElm.style.fontSize = rempx+'px';
          document.body.style.fontSize = '0.16rem'; //16px
    }
    
    
    setRem(750,1920) //pc
    setRem(750,680) //mobile

    vw 与 rem 混合使用:

    如果使用 vw 作为单位,那么 设计稿的 100px 换算 vw 就是  100/(desiginWidth/100) vw ,

    设置  html 样式 font-size:100/(desiginWidth/100) vw, 那么设计稿上像素转换成 rem 也是除以 100 即可. 这个方法甚至不需要 js 来动态设置 html 的 font-size.

  • 相关阅读:
    安全预警-防范新型勒索软件“BlackRouter”
    线程入门
    线程状态
    支付开发总结
    springboot处理date参数
    函数接口
    Excel通用类工具(一)
    Excel通用类工具(二)
    spring bean生命周期
    springboot整合netty(二)
  • 原文地址:https://www.cnblogs.com/ecalf/p/9855596.html
Copyright © 2011-2022 走看看