关于移动端开发宽度高度，字体以及rem宽度使用的总结

遇到的问题：如何适配不同的手机屏幕。
简单的说media query可以解决一部分。但是media query目前是照着iphone5/iphone/iphone6s 三个不同尺寸来进行。
如果手机尺寸不在这三个范围之内，那么元素的宽度可以按照百分比来处理，但是高度就不行了。
比如就会出现在轮播图的情况下，原来的高度是写死如iphone5 200px;iphone6 250px;iphone 6s 300px;
如果手机不在这三个尺寸的范围内就会出现轮播图失真的情况。
于是对于所有的不同尺寸屏幕会有不同的宽度、高度和字体的页面元素，都使用rem的方式来处理。

• 什么是rem

  rem是一个相对页面根元素，也就是html元素的font-size 大小来声明的一个值。详细的百度吧，不做重复工作。
  比如我在html中定义
  font-size:10px;
  在一个body下定义一个div的样式
  ｛height:2rem;width:4rem;font-size:1.2rem}
  那么实际效果就是

｛height:20px;width:40px;font-size:12px}

• 怎么去做多屏幕适配

  把屏幕尺寸的宽度设置成当前屏幕宽度／10；
  比如iphone5 就设置html｛font-size:32px} 200px 高度就变成了 height：6.25rem
  具体实现如下（参考代码中的common.js和style.css）

html{    font-size: 32px;    width: 100%;    height: 100%;}@media only screen and (min-width: 375px){    html {        font-size: 37.5px;    }}@media only screen and (min-width: 414px){    html {        font-size: 41.4px;    }}body{   font-size: 12px;／＊记得要把body font－size默认值设回来 不然就默认字体就变成32px啦＊／}

//重新计算html的字体大小保证使用rem进行设置高宽

var basefontsize =window.screen.width/10+"px";if($("html").css("font-size")!=basefontsize){   $("html").css("font-size",basefontsize);}

关于字体

所有字体如果不随屏幕大小变化情设置成指定的px

引申出来的百分比布局

比如要做一个1:4的纵向布局。第一个div宽度设置成2rem 第二个设置成8rem 这样总共宽度加起来就是10rem＝320px（iphone下），刚好就是1:4的布局有木有很简单

这样就可以愉快的使用rem来设置元素的宽和高来保证不通屏幕的适配了