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
電腦端，瀏覽器解析度與電腦螢幕的解析度是一致的