移动端rem和PSD单位换算问题

2017年7月28日 · 69 字 · 1 分钟

设计图尺寸一般750宽度，而需要兼容640宽度手机的话，需要调整缩放比率，之前使用写死viewport的做法来实现，不过这个方法有点取巧，而且有些场景并不适用。 本文用标准的@media来实现

rem定义

@media screen and (max-width: 750px) {
  html {
    font-size: 30px;
  }
}

@media screen and (min-width: 640px) and (max-width: 749px) {
  html {
    font-size: 25px;
  }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
  html {
    font-size: 15px;
  }
}

如何使用

假设PSD中有个button的大小为100px*40px，那使用rem时CSS如下

button {
    width: 3.333rem;
    height: 1.333rem;
}
qrcode