rem适配布局

本文主要是介绍rem适配布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

@

• 1. rem基础
  • rem单位
  • cssrem
• 2. rem适配方案
  • rem实际开发适配方案
  • rem 适配方案技术使用（2019年市场主流）
    • 方案1：
    • 方案2(flexible.js)

1. rem基础

rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

px、em、rem区别介绍

/* 根html font-size 设为 12px 
	确定了单位数值比（此时：12px = 1rem）
	页面的所有标签若用到rem单位 都根据这个比例
*/
html {
   font-size: 12px;
}
/* 
此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

cssrem

cssrem：px 转换rem vscode插件

• 使用注意点

  使用过程简单，再输入css像素单位时会出现提示框提示转换为rem

  默认的html字体大小为16px，若这当前设备（设计稿）的字html font-size的大小不是16px，要到vscoe的设置里手动修改Cssrem:Root Font Size的大小。

2. rem适配方案

rem实际开发适配方案

① 按照设计稿与设备宽度的比例，利用 CSS3媒体查询 动态计算并设置html根标签的font-size大小。
② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值。

rem 适配方案技术使用（2019年市场主流）

方案1：

• less
• 媒体查询
• rem

方案思路：

1. 确定设计稿的尺寸

   设计稿常见尺寸宽度

   设备	常见宽度
   iphone4\5	640px
   iphone6\7\8	750px
   Android	常见320px、 360px、 375px、 384px、 400px、 414px、 500px、 720px ，大部分4.7~5寸的安卓设备为720px

   一般情况下，以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。

2. 确定不同屏幕尺寸下的html字体大小。

   html字体大小 = 屏幕宽度 / 屏幕划分的份数

   屏幕划分的份数：10、15、20等（划分标准不一 ）

3. 页面元素大小单位px转换为rem单位。

   页面元素rem值 = 页面元素值(px) / html font-size字体大小

4. 通过媒体查询实现不同屏幕尺寸下的html font-size的大小变换。

方案2(flexible.js)

• flexible.js
• rem

1.简洁高效的rem适配方案flexible.js

• 简介

  flexible.js官方地址

  手机淘宝团队出的简洁高效 移动端适配库

• 功能

  该适配库的js文件做了预处理，原理是把当前设备划分为10等份，但是不同尺寸的设备下，比例还是一致的。（所谓的比例：当前屏幕的宽度 / 当前html font-size恒等于10）

• 使用

  由于该适配库自动定义好了不同尺寸设备下的html font-size的大小，所以可以不用手动的通过媒体查询定义，简化了开发。

  1. 确定好当前页面的hmtl font-size,当前设备页面(设计稿)的宽度/10
  2. 页面里的元素大小单位转换为rem

• flexible.js源码解析

  (function flexible(window, document) {
      // 获取的html 的根元素
      var docEl = document.documentElement
          // dpr 物理像素比
      var dpr = window.devicePixelRatio || 1
  
      // adjust body font size  设置我们body 的字体大小
      function setBodyFontSize() {
          // 如果页面中有body 这个元素 就设置body的字体大小
          if (document.body) {
              document.body.style.fontSize = (12 * dpr) + 'px'
          } else {
              // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
              // 的字体大小
              document.addEventListener('DOMContentLoaded', setBodyFontSize)
          }
      }
      setBodyFontSize();
  
      // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
      function setRemUnit() {
          var rem = docEl.clientWidth / 10
          docEl.style.fontSize = rem + 'px'
      }
  
      setRemUnit()
  
      // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
      window.addEventListener('resize', setRemUnit)
          // pageshow 是我们重新加载页面触发的事件
      window.addEventListener('pageshow', function(e) {
          // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
          if (e.persisted) {
              setRemUnit()
          }
      })
  
      // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
      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))
  

这篇关于rem适配布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！