第一种:根元素为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%; } }