rem布局

rem布局 学习rem 先学em
        1.em 是指父元素的字体大小
        2.rem 是指html的字体大小
        3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应
        rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小

rem其实不是布局 是单位
        rem适配方案原理 (动态更改html的字体大小)

布局方式有两种

1. rem+媒体查询
2. js+rem

rem+媒体查询  (动态设置方法）

1. 假设我们的设计稿是750
2. 假设我们把整个屏幕划分为15份（划分的份数可以是10或者20）
3. 每一份作为HTML字体大小，这里是50px   750/15= 50
4. 那么在320px设备的时候，字体大小是320/15=31.33px
5. 用我们页面元素的大小除以不同的HTML字体大小会发现他们比例是相同的（比如要个100px的盒子就是 100px/50字体=2rem,用100px/31.33字体=3.1rem 多是100px的盒子）
6. 比如我们以750为标准设计稿
7. 一个100*100像素的页面元素在750屏幕下，就是100/50 转换为rem 是 2rem*2rem 比例是 1比1
8. 320屏幕下，html字体大小为21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
9. 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果

元素大小取值方法、

1. 最后公式：页面元素的rem值 = 页面元素值 px / （屏幕宽度 / 划分的份数）也就是HTML字体大小
2. 屏幕宽度 / 划分的份数 就是 html font-size的大小
3. 或者：页面元素的rem值 = 页面元素值px  /  html font-size 的大小

方法

rem + 媒体查询 实现元素动态大小变化
		* {
			margin: 0px;
			padding: 0px;
		}
		@media screen and (min-width: 320px) {
			<!-- <= -->
			html {
				font-size: 50px;
			}
		}
		@media screen and (min-width: 640px) {
			<!-- <= -->
			html {
				font-size: 100px;
			}
		}
		.top {
			height: 1rem;
			font-size: 0.5rem;
			color: #fff;
			text-align: center;
			line-height: 1rem;
			background-color: pink;
		}

js+rem 

1. 比较简单（因为用了js）
2. 我们只用设置 页面元素的px值 / 75 就行 （因为js算好了 HTML的字体大小 但是他是除10的） 

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))

 小推荐

vscode cssrem插件 px转换rem   就不用算了 但要改一下vscode编辑器的字体大小 改为页面的字体大小就行