移動端適配rem

標籤：dia   rem   設計   轉化   使用   htm   max   查詢   適配   

第一種：根項目為100px，再按照750設計稿轉化成vw單位，這樣只要按照設計稿的單位/2即可。如果是小程式，不需要除以2。

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

第二種：媒體查詢 按照750設計稿，根項目是100px，相容性比較好。

html {    font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}@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%; }}

移動端適配rem