关于移动端适配

Question

看了老师的回答说不推荐使用rem，有点懵，我可能深受其他教学机构的影响，一直写移动端都使用的rem
老师能稍微具体的说说为啥不推荐rem的原因吗？
老师这个课程用的是px，根据像素比，每次都除以2，感觉好麻烦啊，但这也只是处理了像素比2的啊，像素比3的还要除以3吧
还有图片，要准备3x和2x图， 那设计师就只提供一套图呢，那又该怎么适配了呢？

Answer 1

ustbhuangyi 2019-07-31 09:33:10

rem 本质上就是缩放，它的目标是在不同的手机上，看到的内容都是一样多。
不过我认为这个目标就是有问题的，想象一下，一个页面在 iphone4 那样的小屏和 iphone 7 plus 这样的大屏看到的内容一样多？那在 iphone 7p 下的体验会有多差，字体和图标都无比大，会有一种老年机的既视感。
所以高清大屏显示的内容就应该比小屏手机显示的内容多，这样才合理。
设计通常给你的都是 750 的设计稿，那么就除以 2 就好了，没什么麻烦的，不存在除以 3 的情况。
至于 2x 和 3x 图片，是和设备的 dpi 相关的，通常提供 2 份更好，如果只提供一套，就只用 3x 的图，确保高 dpi 的手机看到的图也清晰。

• 提问者 shuangq #1

  还是没太明白移动端的适配，我之前一直以为px做不了移动端的适配，一提到移动端布局，脑子里立马就想到rem了（这一直是我的误区）
  老师我之前一直写的移动端，都是这种
   (function () {
              var html = document.documentElement;
              var hWidth = html.getBoundingClientRect().width;
              html.style.fontSize = hWidth / 15 + "px";
          })()
  这个是以750的设计稿为例，把屏幕分成15份，然后写的时候，设计图里是多少像素，就量多少像素，然后除以每份大小，得到一个比例，然后根据像素比不同，根节点的字体大小也不同，所以在各个像素比的内容大小都会缩放，反正不管什么，字体，边框，宽高什么的，都是按比例来的，
  老师你说这种适配方案可行吗，之前一直用的这种 
  这么的适配方案有点晕

• ustbhuangyi 回复 提问者 shuangq #2

  多试试用 flex 去布局