px和rem的换算与设置

杨肆月

发布于 2019-08-15 18:52:25

3.4K00

代码可运行

文章被收录于专栏：全栈开发之路全栈开发之路

运行总次数：0

代码可运行

一般所有浏览器的html根元素font-size:16px 1rem = 16px 所以所有px值都基于它来换算设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿px/16px

一般我们拿到的移动端设计稿是基于iphone6的所以一般以这个确定的屏幕做参考 iphone6的屏幕宽度为375px 所以设置基准rem = 375 /10 =37.5 为啥/10，这个无所谓，只是一个自定义规定，为了让根px不要那么大

除了设置html根元素上的font-size之外，还要配合flexible.js使用什么是flexible.js？看下源码

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

参考：http://dwbbb.com/blog/flexible/ https://www.jianshu.com/p/3a07024963d9 其实flexible.js的主要作用是： 1、为html添加data-dpr属性和style属性，style添加font-size作为1rem的基准值。 2、改写meta标签，根据dpr设置设备的缩放比。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.08.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html