做手机端时为了适应大部分手机，很多都是百分比的，但是在做一个简单模块布局时，需要满屏，这是就发现高度也要使用百分比了，好头疼。
直接设置height百分比是不管用的，首先需要设置它的父元素的height值，才能在子元素中是使用height百分比。
<div style="height: 50px">父元素
<div class="height: 50%">
我的高度为25px
</div>
</div>
解决了宽高的适应，但感觉手机的分辨率差距很大，比如iPhone4 和 iPhone 6 plus的分辨率差距好大，导致两者的字体视觉感相差很大。一开始以为em能解决问题，可能是我学的不到家，还希望有大神能够指教。
不知道有没有什么好的框架可以解决。总感觉不会字体也用百分比吧，虽然有用，开发估计得疯了。
后来想到响应式布局，看到了@media screen and，这里对这个总结一下：
@media screen and可以判断设备的width和height，通过判断来改写样式。
- 在link中直接使用，判断是否引用css
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px)">
- 直接写在style中
<style>
@media screen and (max-width: 600px) {
.class {
background: black;
}
}
</style>
@media screen and (max-width: 600px)：小于等于600px
@media screen and (min-width: 600px)：大于等于600px
@media screen and (min-width: 600px) and (max-width: 800px):大于等于600px小于等于800px
关于这里面的值，我个人测了一下，应该是可视区域的大小，不是直接的分辨率大小。
可以通过window.screen.width获取设备的分辨率的width值，然后通过$(window).width()获取可视区域的width值，两者进行比较，我的手机是华为荣耀6，window.screen.width为1080，$(window).width()为980，而用@media screen and判断时，是使用的980的值为界限。