首页 > 移动平台 > 详细

移动端适配rem

时间:2018-08-16 19:05:19      阅读:189      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/linxue/p/9488668.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!