css3-media规则、不同手机分辨率的临界、rem

1、许多方法测试所得（网上）

html {

    font-size: 62.5%;
}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important;
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important;
    }

}

2、因为设计图640px，手机里就是320px，字体也小一半

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

3、整理

 根元素16px，

html{font-size:62.5%;}  根元素改变为10px，320px（实际640px）

body{font-size:1.2rem;}   12px

@media only screen and （min-width：401px）{       

 font-size：78%;

}  

401px  ---iPhone6plus  dpi

78%*16=12.48px

4、width：手机浏览器的分辨率，而不是手机设备的屏幕分辨率

      Safari：320*480

      苹果4:960*640

      米3:1080px  浏览器：360px

电脑端，浏览器分辨率与电脑屏幕的分辨率是一致的