优雅的使用 rem 进行移动端布局开发

缘起

在工做中，移动APP端的同窗问我，在移动web端中是如何去作不一样的屏幕大小所展现的效果和设计图都是一致的？

咱们在遇到这种问题的时候，脑海中第一反应，应该是使用哪一种布局方案去实现这种效果吧？

布局方案

先说说布局方案，在前端历史计划中，诞生了几种布局概念，分别是：

1. 静态布局
2. 流式布局
3. 自适应布局
4. 响应式布局
5. 弹性布局

题外话

这其中，因 bootstrap 的缘由，咱们对响应式布局绝对是很熟悉的，它的栅格系统就是使用了响应式布局方案。 那么静态布局，也是咱们常用在 PC 当中，可是随着科技的发展，愈来愈多的屏幕大小，以致于静态布局再也知足不了咱们需求了，这时候自适应布局就出来了，根据不一样尺寸和设备切换不一样的样式。关于布局概念，本文就不作过多的介绍，切入正题。

rem 布局

一样相对于 PC 端，有很多的屏幕尺寸须要作兼容处理，那么移动端也是不例外的，并且移动端的机型是比较复杂的，那么就须要一套比较完善的布局方案来支持了。

因淘宝的 Flexible 让rem布局火了起来，致使前端圈中出现了不少的 rem 布局方案，我就是 rem 布局方案的崇拜者，那么就来讲说 rem 布局。

rem是什么

rem（font size of the root element）是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位。

在面试中，我常常会问答 rem 和 em 的区别，获得的答案也是各有千秋，那么，到底该怎么去理解两个单位？

其实 em（font size of the element）也是一个相对单位。只是 em 相对于父元素的字体大小的单位。rem 是相对于根元素的字体大小的单位。

案例

刚才咱们说到了淘宝引起的潮流，那么咱们在说几个：亚马逊、携程、京东、当当这些网站都有使用了的 rem 的布局方案。

rem + flex 布局方案

rem 的布局，你们都知道就是操做 html 根元素的字体大小来实现的不一样尺寸单位的换算。这里重点的就是根元素字体大小的设置，以前我所使用的是经过媒体查询来设置不一样的大小，好比：

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}
复制代码

因视窗单位的设备支持度愈来愈好，因此就有了

html{
    font-size: calc(100vw/7.5);
}
复制代码

再配合 js 处理不支持视窗单位的设备

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'
复制代码

可能这里，就会有朋友问我，为何这里要除于 7.5 呢?

**答：**这里是由于不少设计稿都是基于 iPhone6 来设计的，通常都是 750px（2 倍图，iPhone6 的设备宽度为 375px）因此除于 7.5 是为了在 iPhone6 设备下让 1rem 等于 100px，固然这个能够根据你设计稿来定。

如何在 css 中根据设计图的 px 尺寸来缓存 rem 尺寸呢？

这里，我将使用 scss 的便捷来处理单位的换算：

@function px2rem($px, $base-font-size: 50px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}
复制代码

由于这里的设计图使用的是 1 倍图，因此$base-font-size为 100px / 2 = 50px

div {
    width: px2rem(100px);
}
复制代码

换算结果

div {
    width: 2rem;
}
复制代码

到这里，咱们的 rem 布局使用就已经完成了，那么在实际工做当中，确定一个 rem 是解决不了全部的布局需求的，那么这里咱们在配合着 flex 布局，就能解决一大半的布局问题了，关于 flex 布局，我将会在下文中分享！

最后，感谢各位的耐心阅读，若是文中有不对或不全之处，欢迎留言指教！

在最后，若是感受本文不错或对你有帮助，不妨点个赞呗！

做者：falost

原文地址：falost.cc/article/5d5…