移动端页面使用单位的问题：关于px、百分比、em、rem开发中逐渐转换的问题记录

前端开发单位使用问题记录 px，百分比，em，rem

一、单位与区别：

px：像素，相对于屏幕分辨率而言的，简单来说就是平时我们写静态页面时用px作单位，但是在firefox/chrome会发现我们的布局发生了变化；

百分比：这比较适合块状的页面设计，但是他相对于不同屏幕而言的，比如经常在写移动端的时候也会用到

em：是相对长度单位，相对于父级元素的单位。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。就是当默认字体大小为14px，那么就有1em=14px；

rem：是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

二、问题与总结

平时写pc端页面时，一般是px作为单位，遇到一些比较复杂的需要定位的也会夹杂使用百分比

主要来说说移动端页面：

1、刚开始接触移动端页面时，我用的是百分比和px,当时做出来就只对着一个手机进行调试，结果可想而知的，用不同浏览器测试时，有些布局就乱掉了，就算调整也不能完全还原设计图所设计的；

2、后面发现了使用em作为单位，它是相对长度单位但是是相对于父级元素的，相对于当前对象内文本的字体尺寸，当浏览器分辨率发生变化时，他会重新计算相对的长度的大小并展现出来

这个行内文本的字体大小是可以认为设置的，默认是14px，就有1em=14px，所以将页面里的px转化为em在显示是基本可以满足适应不同移动端浏览器的，下面我就开始了漫长的计算过程

因为不同移动端屏幕的分辨率是不一样的，而我们一般得到的设计稿是640px，那怎样才能在750px等更大写的屏幕上完美的显示出来呢：

这里我使用的是css3 媒体查询，先给页面设置一个字体大小为18px（也就是1em=18px）然后按不同的屏幕尺寸，分别计算不同屏幕下相对于18px的字体大小：

body {
  font-size: 18px;
}
@media only screen and (max-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 300px;
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 310px;
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  body {
    font-size: 17.22222px;
  }
  .viewport {
    max-width: 320px;
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  body {
    font-size: 17.77778px;
  }
  .viewport {
    max-width: 350px;
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  body {
    font-size: 19.44444px;
  }
  .viewport {
    max-width: 360px;
  }
}
@media only screen and (max-width: 400px) and (min-width: 360px) {
  body {
    font-size: 20px;
  }
  .viewport {
    max-width: 400px;
  }
}
@media only screen and (max-width: 470px) and (min-width: 400px) {
  body {
    font-size: 22.22222px;
  }
  .viewport {
    max-width: 470px;
  }
}
@media only screen and (max-width: 480px) and (min-width: 470px) {
  body {
    font-size: 26.11112px;
  }
  .viewport {
    max-width: 480px;
  }
}
@media only screen and (max-width: 540px) and (min-width: 480px) {
  body {
    font-size: 26.66666px;
  }
  .viewport {
    max-width: 540px;
  }
}
@media only screen and (max-width: 560px) and (min-width: 540px) {
  body {
    font-size: 30px;
  }
  .viewport {
    max-width: 560px;
  }
}
@media only screen and (max-width: 570px) and (min-width: 560px) {
  body {
    font-size: 31.11112px;
  }
  .viewport {
    max-width: 570px;
  }
}
@media only screen and (max-width: 630px) and (min-width: 570px) {
  body {
    font-size: 31.66666px;
  }
  .viewport {
    max-width: 630px;
  }
}
@media only screen and (max-width: 640px) and (min-width: 630px) {
  body {
    font-size: 35px;
  }
  .viewport {
    max-width: 640px;
  }
}
@media only screen and (max-width: 710px) and (min-width: 640px) {
  body {
    font-size: 35.55556px;
  }
  .viewport {
    max-width: 710px;
  }
}
@media only screen and (max-width: 720px) and (min-width: 710px) {
  body {
    font-size: 39.44444px;
  }
  .viewport {
    max-width: 720px;
  }
}
@media only screen and (min-width: 720px) {
  body {
    font-size: 40px;
  }
  .viewport {
    width: 720px;
  }
}

然后就可以计算出不同屏幕分辨率下的相对尺寸是多少px，在按照设计稿计算出em值（假设设计稿为640px，那么（1em=35px））

em是相对于父级元素变化的单位，所以当你的父级元素的字体大小发生变化时他也会跟着变化

3、rem，是直接的相对于根元素变化的，感觉这是em的一个升级。。。

同样的这也是需要计算和设计初始的字体大小的，但是有个很便捷的路径，使用sublime text3里面的一个cssrem插件配合使用flexible.js，可以自动进行换算，省时省力，还省代码。当时有的时候还得配合使用百分比和px。

以上都是个人的小经验总结