recently studied the mobile layout, rem layout, the general idea is to zoom the page to DPR*device-width and then zoom 1/DPR to solve the problem, but doing so found a problem. For example:

I developed a navigation bar according to iPhone6 375 / 667, which has no problem with Apple products.

Pixel 2 :

is obvious, the decimal error rounding problem is because the final width of the five navigation bars is 1078.85, and the screen width is 1078, so the line is changed.

existing scheme:

1. Last nav margin-right:auto
2. increase the width of the box container, and then the parent box overflow:hidden
3. inline-block layout forces no line wrapping instead of float layout

of course, I know that this problem can be solved through flex , and vw may alleviate this problem, but I didn"t use it, because in the age of rem layout, the compatibility of vw and flex should not be acceptable, and if the compatibility of vw and flex is acceptable, it is not necessary to use rem layout.

so I want to ask, did you have a better solution at that time?

Code:

/* 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;
}