移动端 第十六章 flexbjs+rem

第十六章 flexbjs+rem

1：rem+@media+less是我们移动端布局的第一种方案。
2：flexible.js+rem是我们移动端布局的第二种方案。
3：flexible.js库简介：
–flexible.js库是淘宝研发的一种解决移动端页面适配不同手机尺寸的方法。
–flexible.js库的优点就是可以节省我们的@media标签和less文件。
–但是flexible.js库把当前页面划分了10等份，所以在计算页面基准值的时候
–在750px的设计稿下面的html{font-size:750px/ 10} 750px/10= =75px
–…
–在320px的设计稿下面的html{font-size:320px/ 10} 320px/10= =32px
4：所以现在在750尺寸的手机设计稿的字号大小是75px ，页面中元素的宽高设置如： 320/75
5：设置HbuilderX中的字号：
–工具= =>设置= =>编辑器配置= =>px转rem比例= =>改成页面要用的字号大小，如：750下是75
6:如果屏幕尺寸超过750px，那么就加上一句：
@media screen and (min-width:750px) {
html{
font-size: 75px !important;
!important 是为了提升权重，以为flexb.js比index.css权重大
}
}