手机端开发自我总结一

做手机端时为了适应大部分手机，很多都是百分比的，但是在做一个简单模块布局时，需要满屏，这是就发现高度也要使用百分比了，好头疼。

 

直接设置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的值为界限。