移动端自适应 #

px/em/rem #

px: 像素，它是一个固定大小的单元，像素的计算是针对屏幕的，一个像素（1px)就是屏幕的一个点，但是因为它是固定大小的，所以不能够自适应

em: em是相对于父级元素的单位，它是用来设置文本的字体尺寸，相对于当前对象内的文本的字体尺寸；一般浏览器默认(1em=16px)，会随父级元素的属性（font-size或其他属性）变化而变化

rem: (css3新增的相对长度单位)，相对于根目录，即HTML元素，所以只要在HTML标签上设置字体大小（font-size)，文档中的字体大小都会以此为参照标准，一般用于自适应布局

rem与font-size换算 #

1rem=html标签的font-size大小

浏览器一般默认字号为16px，即font-size: 16px，则1rem为16px

html {
  font-size: 100% // 相当于16px
}
div {
  width: 3rem  // 相当于3*16px = 48px
}

html {
  font-size: 100% // 相当于16px
}
div {
  width: 3rem  // 相当于3*16px = 48px
}

可以根据不同尺寸调整html的font-size

html {
  font-size: 200% // 相当于32px
}
div {
  width: 3rem  // 相当于3*32px = 96px
}

html {
  font-size: 200% // 相当于32px
}
div {
  width: 3rem  // 相当于3*32px = 96px
}

px与rem的换算 #

实际开发中，ui给出设计稿，按照设计稿的px转换成相应的rem，从而达到完美实现设计稿的同时，兼容不同分辨率

实际开发中，一般都是使用js转换，开发者直接写px，然后借助js自动转换px为rem，比如经典的lib-flexible