移动端两种布局方式

移动端布局方式

less+rem+@media

rem+@media+less是我们移动端布局的第一种方案。

1. 移动端页面设计稿尺寸：
   – 安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px
   – 苹果手机尺寸：640px 750px
2. 通过less+rem+@media 技术完成页面在各个手机尺寸上的显示
3. 手机页面的准备工作：
   –UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px
   –前端开发人员再人为的把设计稿分为若干份 如：苏宁分为 15等份
   –(划分页面的份数的目的，只是为了求一个基数值，在写元素大小的时候可以进行换算)
   –分完若干等份后，就可以算出不同尺寸页面下 html里面的font-size 字号大小
   –如：750/15=50 750像素的手机上的html{font-size:50px}
   –如：720/15=48 720像素的手机上的html{font-size:48px}
4. 手机上元素的宽高就可以通过除以html里面的字号大小，得到一个rem相对单位的值
5. 工作当中的研发流程：
   –立项目 （项目的研发的时间）
   –产品经理 去写项目策划书，项目说明书（对项目的介绍）
   –产品经理/UI 做产品的原型图 （原型图出来后，前端就会开始研发）
   –UI/UE 做项目的完稿 。
   –前端研发 后端开发数据
   –项目测试
   –项目上线（项目完工）

flexible.js+rem

flexible.js+rem是我们移动端布局的第二种方案。

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

所以现在在750尺寸的手机设计稿的字号大小是75px ，页面中元素的宽高设置如： 320/75

设置HbuilderX中的字号：
工具 => 设置=> 编辑器配置 => px转rem比例 => 改成页面要用的字号大小，如：750下是75

如果屏幕尺寸超过750px，那么就加上一句：

@media screen and (min-width:750px) {
	html{
		font-size: 75px !important;
		/*!important 是为了提升权重，以为flexb.js比index.css权重大*/
	}
}