移動端適配rem&&媒體查詢

第一種:根元素爲100px,再按照750設計稿轉化成vw單位,這樣只要按照設計稿的單位/2便可。若是是小程序,不須要除以2。html

html{
    font-size: 26.66vw;  //移動端適配 這裏使用rem+vw方案 省去媒體查詢  
}

第二種:媒體查詢 按照750設計稿,根元素是100px,兼容性比較好。web

html {
    font-size: 625%;  /*100 ÷ 16 × 100% = 625%*/
}
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    html {  }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}
相關文章
相關標籤/搜索