H5页面移动端调试 字体大小问题？

Question

UI的设计图是750px，但是文字的大小给的是14px;按照前端的写法是将html的size设置成20px; 那么转化为rem就是14 / 40rem = 0.35rem。
但是在谷歌浏览器的大小中并不是14px,而是大于14px，请问这种情况应该怎么解决？？

Answer 1

文字大小 14px 转成rem为什么要除40应该是除以20啊

Answer 2

UI给的设计图的750px,也就是2x的设计图，
1.你需要先跟UI确认，字体是也是放大了2倍，也就是他的本意是14px还是7px，如果他虽然设计图给的2x，但是字体没有放大，那按照你说的，转成rem，14 / 20rem = 0.7rem，这个的话 谷歌浏览器显示出来没问题
2.如果跟UI确认过了的确字体也放大了，即他的本意是7px的话(我觉得这个可能性不大，因为页面一般字体都在10px以上), 浏览器显示出来的肯定是有问题的，即使你设置了0.35rem，浏览器也会按照自己的默认最小字号显示，所以谷歌显示出来的大于14px，这时候有个解决方法是使用transform将scale缩小。
下面的例子是一个按钮，里面显示的文案大小就是7px

.btn{
  padding: 0 0.2rem;
  box-sizing: border-box;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,139,48,0.12);
  color: #ff8b30;
  // 这里先设置成大的字号
  font-size: 0.7rem;
  border-radius: 0.4rem;
  margin-left: 0.2rem;
  span{
    // 这里缩小0.5倍
    transform: scale(0.5)
  }
}

Answer 3

webkit内核下，字号会自动放大的问题

Answer 4

浏览器最小显示字体大小12px,根元素20px的话0.35rem就是7px，这样子浏览器默认显示大小12px。怎么会大于14px呢。。