在移动端存在各式各样的分辨率，移动端网页就会面对很复杂的兼容问题，并非是兼容系统，而是要保证页面在不同分辨率网页当中效果的一致性。
对于这种问题，其实还是比较好解决的，横向采用百分比，就能够实现内容随着设备宽度大小的变化而变化的需求。
比较难解决的问题是纵向上的高度问题，相信你也使用过百分比去尝试解决，但是如果高度采用百分比，盒模型中padding、margin等属性的计算方式有些特殊，这也就导致纵向不能够使用百分比。（对于这方面如果希望了解，可以在一个叫“HTML5学堂”的网站当中查看，里面有非常详细和清晰的讲解，在此我就不再重复书写了）
这样的现状就导致纵向需要使用其他单位来解决，于是就会使用到CSS3当中一个新的单位，rem。
rem是一个相对度量单位，是针对html标签的字体大小来计算的。如果html标签的字体大小为16px，那么1rem就是16px，如果html标签的字体大小是20px，那么1rem就是20px。
横向使用百分比，纵向使用rem，之后用JS去获取当前设备宽度，并根据设备宽度、设计图宽度、设计图基准字体大小，通过JS计算出当前设备下html文件的font-size（基准字体大小），就是适配移动端各个分辨率设备的方法。
给出JS代码作为参考，不过，这个JS是基于JQ的：
这个里面设计图是640的，设计图中最小字体是24像素。所以，当你进行开发时，如上这段代码当中的几个数字，也要根据设计图的具体值而调整。
在移动端存在各式各样的分辨率，移动端网页就会面对很复杂的兼容问题，并非是兼容系统，而是要保证页面在不同分辨率网页当中效果的一致性。
对于这种问题，其实还是比较好解决的，横向采用百分比，就能够实现内容随着设备宽度大小的变化而变化的需求。
比较难解决的问题是纵向上的高度问题，相信你也使用过百分比去尝试解决，但是如果高度采用百分比，盒模型中padding、margin等属性的计算方式有些特殊，这也就导致纵向不能够使用百分比。（对于这方面如果希望了解，可以在一个叫“HTML5学堂”的网站当中查看，里面有非常详细和清晰的讲解，在此我就不再重复书写了）
这样的现状就导致纵向需要使用其他单位来解决，于是就会使用到CSS3当中一个新的单位，rem。
rem是一个相对度量单位，是针对html标签的字体大小来计算的。如果html标签的字体大小为16px，那么1rem就是16px，如果html标签的字体大小是20px，那么1rem就是20px。
横向使用百分比，纵向使用rem，之后用JS去获取当前设备宽度，并根据设备宽度、设计图宽度、设计图基准字体大小，通过JS计算出当前设备下html文件的font-size（基准字体大小），就是适配移动端各个分辨率设备的方法。
给出JS代码作为参考，不过，这个JS是基于JQ的：
这个里面设计图是640的，设计图中最小字体是24像素。所以，当你进行开发时，如上这段代码当中的几个数字，也要根据设计图的具体值而调整。