菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 20221125孙科 [打印本页]

---

作者: Sunke丶    时间: 2022-11-26 00:12
标题: 20221125孙科

• REM实际开发适配方案1
  
  • 实际方案：
    
    • ①假设设计稿是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
      
    • ⑨但是已经能实现不同屏幕下  页面元素盒子等比例缩放的效果
      
  • 总结：
    
    • 页面元素的rem值 = 页面元素的px值 / html字体大小（屏幕的宽度/划分的份数）
      

• REM实际开发适配方案2
  
  • 实际方案 flexble.js + rem
    
    • 手机淘宝团队出的简洁高效 移动端适配库
      
    • 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
      
    • 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
      
    • 我们要做的，就是确定好我们当前设备的html 文字大小就可以了
      
    • 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
      
    • 里面页面元素rem值： 页面元素的px 值 /  75  剩余的，让flexible.js来去算
      
  • 下载插件css rem
    
    • 对默认字体大小进行设置
      

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4