小徐de私地

越学习,越发现自己的无知 ...

移动端H5页面适配方案

2020年04月28日

移动端H5的适配我们采用 vw + rem 方案

说明如下(假设设计图宽度为750px时):

设置 html { font-size: 100px; }

设置媒体查询,当视窗小于750px时,使用 vw 动态计算 html 的 font-size,计算公式:100 / 750 * 100 vw

设置 img { max-width: 100%; }

html { font-size: 100px; }

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

img { max-width: 100%; }

正常编写 css,所有尺寸均使用 rem 做单位,计算方式:设计图量取的 px 值除以100

例如:

100px => 1rem

55px => .55rem

1366px => 13.66rem

页面中的所有 img 标签如果宽度不是100%,需要设定 rem 单位的尺寸

所有背景图片需要设置 background-size

下一篇