ionic3 scss屏幕自适应_ionic会根据手机型号的变化而改变大小吗-优快云博客

ionic3 scss屏幕自适应

如下图，通过屏幕宽度的值设置html根节点的font-size值，然后使用rem单位。

UI设计图的尺寸一般都是iphone6 （宽度750px）为原型制作，因为inpone6手机是二倍屏，此时设置iphone6的font-size为50px。

刚好可以在coding的时候直接设置尺寸为：

UI设计图上量的尺寸*0.01 rem

eg： ui上量的高度是20px ，那么coding尺寸是：20*0.01=0.2rem

/* iphone5 宽度 320 */
@media screen and (min-width:300px) and (max-width:340px){
    html{font-size:40px;}
}
/* iphone6,7,8,x 宽度 375 13.89*/
@media screen and (min-width:341px) and (max-width:410px){
    html{font-size:50px;}
}
/* iphone6,7,8plus 宽度 414*/
@media screen and (min-width:411px) and (max-width:600px) {
    html{font-size:55px;}
}
/* ipad 宽度 768*/
@media screen and (min-width:601px) and (max-width:780px){
    html{font-size:85px;}
}
/* ipad pro 宽度 1024*/
@media screen and (min-width:781px) {
    html{font-size:100px;}
}

版权声明：本文为优快云博主「一闪一闪亮晶晶，漫天都是小星星」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/assassin_0302/article/details/97889138