rem适配移动端

作者: icon6 | 来源:发表于2019-05-31 09:13 被阅读0次

移动端适配及pc端跳转代码
解决vue移动端适配问题
解决vue移动端适配问题
移动端之js控制rem，适配字体
React 配置 rem (移动端适配)
电商项目笔记（3）---移动端适配
移动端rem适配
如何在Vue项目中使用vw实现移动端适配
移动端适配方案
记一次前端技术分享（移动端相关概念讲解）

引言

最近连续写了一个月的移动端企业网站，抽空总结跟大家分享下

rem是什么

rem（font size of the root element）是指相对于根元素的字体大小的单位。

rem使用

现在一般手机端都是按照375px来设计，通常我们会拿到的750pxpsd设计稿，这是我们需要把设计稿的宽度/2

页面开头处引入下面这段代码，用于动态计算font-size

window.onload = function () {
    var w = document.body.clientWidth; //获取屏幕宽度
    // 这里*100 是为了取整数
    var x = parseInt((w * 100) / 375 * 10) / 10; //获取任意屏幕上的根节点字体大小
    document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
    //监听屏幕宽度变化
    window.onresize = function () {
        var w = document.body.clientWidth; //获取屏幕宽度
        var x = parseInt((w * 100) / 375 * 10) / 10;; //获取任意屏幕上的根节点字体大小
        document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
    }
}

撸个小小的例子看下


  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script>
          window.onload = function () {
              //获取屏幕宽度
              var w = document.body.clientWidth; 
              // 这里*100 是为了取整数
              var x = parseInt((w * 100) / 375 * 10) / 10; 
              //获取任意屏幕上的根节点字体大小
              document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
              //监听屏幕宽度变化
              window.onresize = function () {
                  //获取屏幕宽度
                  var w = document.body.clientWidth; 
                  //获取任意屏幕上的根节点字体大小
                  var x = parseInt((w * 100) / 375 * 10) / 10;; 
                  document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
              }
          }
      </script>
  
      <style>
          * {
              margin: 0;
              padding: 0;
          }
  
          body {
              max-width: 750px;
              margin: 0 auto;
          }
        /* 如果按照750px的设计搞量出来头部的高度为80的话，那么在转换过程中你需要的这样计算 80/2/100 最后计算出高度为0.4rem*/
          /* 80/2是转换成375px的手机端，除以100转换成rem单位 */
          header {
              background: purple;
              height: 0.4rem;
          }
      </style>
  
  </head>
  
  <body>
      <header>
  
      </header>
  </body>
  
  </html>