rem實際開發適配方案

一、rem適配方案1、rem+媒體查詢+less技術

1、設計搞常見的尺寸寬度 

一般情況下，我們以兩套大部分適應的屏幕，放棄極端屏對其優雅降級，犧牲一些效果，現在基本以750為准

2、動態設置 html 標簽 font-size 大小

• 假設設計稿是750px
• 假設我們把整個屏幕划分為15等分（划分標准不一可以是20等份也可以是10等份）
• 每一份作為html字體大小，這里就是50px
• 那么在320px設備的時候，字體大小為320/15 就是21.33px
• 用我們頁面元素的大小  除以不同的 html 字體大小會發現他們比例還是相同的
• 比如我們以750 為標准設計稿
• 一個100*100像素的頁面元素在 750屏幕下，就是 100  /  50轉換為rem 是 2rem * 2rem 比例是1比1
• 320屏幕下，html字體大小就為 21.33 則2rem = 42.66px, 此時寬和高 都是42.66， 但是高和寬還是1比1
• 但是已經能實現不同屏幕下，頁面元素盒子等比例縮放的效果

3、元素大小取值方法

• 最后的公式：頁面元素的rem值 = 頁面元素值（px） /  (屏幕寬度 /  划分的份數)
• 屏幕的寬度 / 划分的份數就是 html font-size 的大小
• 或者：頁面元素的rem值 =  頁面元素值 （px） /  html font-size 字體大小

4、總結出得一個媒體查詢的公共文件 common.less

// 定義一個公共的common.less文件  先裝nodejs node -v
// npm install -g less 查看下安裝成功沒 lessc -v
// vscode 插件可以直接將less文件轉換為css文件  （Easy-LESS）
// 設置常見的屏幕尺寸， 修改里面的html文字大小

// 一定要寫最上面 
html{
  font-size: 50px;
}
// 我是定義的划分是15等份
@no: 15;
// 320
@media screen and (min-width: 320px){
  html{
    font-size: 320px / @no;
  }
}
// 360
@media screen and (min-width: 360px){
  html{
    font-size: 360px / @no;
  }
}
// 375 iphone 678
@media screen and (min-width: 384px){
  html{
    font-size: 384px / @no;
  }
}
@media screen and (min-width: 400px){
  html{
    font-size: 400px / @no;
  }
}
@media screen and (min-width: 414px){
  html{
    font-size: 414px / @no;
  }
}
@media screen and (min-width: 424px){
  html{
    font-size: 424px / @no;
  }
}
@media screen and (min-width: 480px){
  html{
    font-size: 480px / @no;
  }
}
@media screen and (min-width: 540px){
  html{
    font-size: 540px / @no;
  }
}
@media screen and (min-width: 720px){
  html{
    font-size: 720px / @no;
  }
}
@media screen and (min-width: 750px){
  html{
    font-size: 750px / @no;
  }
}

二、rem適配方案2 簡潔高效rem適配方案flexible.js

• 手機淘寶團隊出的簡潔高效移動端適配庫
• 我們再也不需要在寫不同屏幕的媒體查詢，因為里面js做了處理
• 它的原理是把房錢設備划分成10等份，但在不同設備下，比例還是一致的
• 我們要做的就是確定好我們當前設備的html 文字字體大小就可以了
• 比如當前設計稿是750px 那么只需要把html文字大小設置為75px （750px/10）就可以
• 里面頁面元素rem值：頁面元素的px值 / 75
• 剩余的，讓flexible.js去計算
• github地址: https://github.com/amfe/lib-flexible