十五、移动端vw+rem等比缩放布局开发的详细步骤：包含px与rem的单位换算、二倍图以及如何使用UI给的设计稿等（开发工具HBuilder）

1 单位换算公式：代码像素=物理像素 / 2 / 100

代码像素：开发时，直接写进代码的像素，单位为rem

物理像素：指用PS直接测量设计稿时得到的尺寸，单位为px

除以2：该公式以二倍图为例子计算，所以进行了除以2操作；如果是三倍图，则除以3.

除以100： 根元素的设置的字体大小是100px,所以除以100；根元素字体大小会转换vw单位，具体的值根据UI给的设计稿决定。下文有如何根据设计稿决定数值的大小的说明。

2 移动端开发的详细步骤

• 第一步：引入meta标签。关于meta标签的作用和各个参数的含义：做移动开发时，meta标签的作用和各个参数的含义_^小福气^的博客-CSDN博客_移动端meta标签作用
• 第二步：引入样式文件

        注：先引入字体图标文件iconfont.css，再引入公共样式文件commmon.css，最后引入自己给该页面设计的样式文件index.css。

        如果不按这个顺序引入，在数据量大或者网络延迟时，可能会出现一些显示性的问题，建议还是按照顺序引入文件。

• 第三步：在index.css文件中设置根元素内的字体大小

        1 判断设计稿的机型

                用ps之类的软件打开UI给的二倍图的设计稿，如果测量得到的是750px,除以2后就是 375px，即该设计稿的机型是iPhone6。

        2 此时就能确定根元素的设置。

html{font-size:26.67vw}。关于如何根据机型设置根元素：移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）_^小福气^的博客-CSDN博客

• 第四步：在index.css文件中设置body的字体大小

        1 为什么还需要设置body的字体大小？

        我们在上一步中设置了根元素的大小，进行vw单位换算时，使用的是font-size:100px。根据继承性，页面内的字体大小会继承根元素的字体大小，所有我们需要在body中把字体大小设置为正常大小：body{font-size:0.12rem}

        2 字体大小0.12rem的由来。

        根据设计稿，发现大部分的字体大小是24px，24/2/100=0.12rem。

• 第五步：页面大体布局

        确定页面的哪一块是固定的，哪一块是可以滑动的。例如商城应用中，顶部的搜索框和底部的导航栏是固定的，中间的内容区域是可滑动的，即上中下结构。

         这一步是为了开发时思维更加清晰，把页面的布局进行了模块化。只是个人开发习惯。

第六步：继续开发，细化页面。

移动端vw+rem等比缩放布局开发的详细步骤：包含px与rem的单位换算、二倍图以及如何使用UI给的设计稿等（开发工具HBuilder）_^小福气^的博客-CSDN博客