移動端 rem 布局小數(shù)換行，溢出

最近研究移動端布局，rem 布局，總體思路是把頁面放大到 DPR*device-width 然后縮放 1/DPR 來解決問題，但是這樣做發(fā)現(xiàn)一個問題。比如：

我照著 iPhone6 375*667 開發(fā)一個導航條，在蘋果產(chǎn)品上都沒有問題，

但是換到 Pixel 2 上就有問題，如圖：

原因很明顯，小數(shù)誤差舍入問題因為5個導航條最終寬度 1078.85，而屏幕寬度 1078 放不下，所以換行了。

已有的方案：

最后一個 nav margin-right:auto
增加盒子容器寬度，然后父盒子overflow:hidden
inline-block 布局強制不換行而不是 float 布局

當然，我知道，可以通過 flex 解決這個問題， vw 或許可以緩解這個問題，但是我沒采用，因為在使用 rem 布局的年代，vw 和 flex 的兼容性應該是不可以接受的，如果 vw 和 flex 的兼容性可以接受的話，也沒有必要使用 rem 布局了，不是么？

所以我想問，當時你們有什么更好的解決方案么？

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    document.addEventListener(
      'DOMContentLoaded',
      () => {
        let dpr = window.devicePixelRatio
        let html = document.documentElement
        let body = document.body
        let deviceWidth = window.innerWidth || html.clientWidth
        html.style.fontSize = (deviceWidth * dpr) / 10 + 'px'
        html.setAttribute('data-dpr', dpr)
        body.style.fontSize = 'initial'
        body.style.fontSize = parseInt(getComputedStyle(body).fontSize) * dpr + 'px'
        let metaViewport = document.querySelector('meta[name=viewport]')
        metaViewport.setAttribute(
          'content',
          `width=${dpr * deviceWidth},initial-scale=${1 / dpr}`
        )
      },
      { capture: true },
      true
    )
  </script>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet/less" href="./less.less">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js"></script>
</head>

<body>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a href="#" class="nav__link">nav1</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">nav2</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">nav3</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">nav4</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">nav5</a>
      </li>
    </ul>
  </nav>
</body>

/* reset.css */

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

li {
  list-style: none;
}

a {
  text-decoration: none;

  color: inherit;
}
.px2px(@name, @px) {
  @{name}: round(@px) * 1px;
  [data-dpr='2'] & {
    @{name}: round(@px*2) * 1px;
  }
  // for mx3
  [data-dpr='2.5'] & {
    @{name}: round(@px * 2.5) * 1px;
  }
  //for Pixel2
  [data-dpr='2.625'] & {
    @{name}: round(@px * 2.625) * 1px;
  }
  // for XiaoMi note
  [data-dpr='2.75'] & {
    @{name}: round(@px * 2.75) * 1px;
  }
  [data-dpr='3'] & {
    @{name}: round(@px * 3) * 1px;
  }
  //for Pixel2 XL
  [data-dpr='3.5'] & {
    @{name}: round(@px * 3.5) * 1px;
  }
  // for Samsung note4
  [data-dpr='4'] & {
    @{name}: @px * 4px;
  }
}

/* base.css */

.nav {
  //suggest use em not px otherwise have to set different font-size for different DPR
  .px2px(font-size, 16px);
  overflow: hidden;
  width: 100%;
}

.nav__list {
  // width: 110%;
  width: 100%;
  height: 100%;
  // for inline-block
  // white-space: nowrap;
  overflow: hidden;
  background-color: pink;
  letter-spacing: -0.5em;
}

.nav__item {
  letter-spacing: normal;
  float: left;
  // display: inline-block;
  color: white;
  background-color: yellowgreen;

  width: 65/375 * 10rem;
  height: 40/375 * 10rem;

  margin: 5/375 * 10rem;
  line-height: 40/375 * 10rem;
}

.nav__link {
  display: block;

  width: 100%;
  height: 100%;

  text-align: center;
}

回答

編輯回答

疚幼

抱歉可能有點跑題如果我遇到這個問題可能不會用rem來做

如果是導航條的話，我用 inline-block + 百分比寬度來做

<div class="outer">
    <div style="background-color: red"></div>
    <div style="background-color: orange"></div>
    <div style="background-color: yellow"></div>
    <div style="background-color: green"></div>
    <div style="background-color: blue"></div>
</div>

<style>
    .outer {
        /* 去掉inline-block中間的間隙 */
        font-size: 0;
    }

    .outer div {
        display: inline-block;
        width: 20%;
        height: 10px;
    }
</style>

或者是 float

<div class="outer">
    <div style="background-color: red"></div>
    <div style="background-color: orange"></div>
    <div style="background-color: yellow"></div>
    <div style="background-color: green"></div>
    <div style="background-color: blue"></div>
</div>


<style>
    .outer div {
        float: left;
        width: 20%;
        height: 10px;
    }

    .outer:after {
        /* 清除浮動 */
        content: '';
        display: table;
        clear: both;
    }
</style>

效果：

2017年1月28日 09:53

編輯回答