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- 320px){
  html{
    font-size: 320px / @no;
  }
}
// 360
@media screen and (min- 360px){
  html{
    font-size: 360px / @no;
  }
}
// 375 iphone 678
@media screen and (min- 384px){
  html{
    font-size: 384px / @no;
  }
}
@media screen and (min- 400px){
  html{
    font-size: 400px / @no;
  }
}
@media screen and (min- 414px){
  html{
    font-size: 414px / @no;
  }
}
@media screen and (min- 424px){
  html{
    font-size: 424px / @no;
  }
}
@media screen and (min- 480px){
  html{
    font-size: 480px / @no;
  }
}
@media screen and (min- 540px){
  html{
    font-size: 540px / @no;
  }
}
@media screen and (min- 720px){
  html{
    font-size: 720px / @no;
  }
}
@media screen and (min- 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