移动端第二十三章 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权重大
	}
}