本文详细介绍了移动端使用vw+rem进行等比缩放布局的开发步骤，包括px到rem的单位换算、二倍图处理以及如何根据UI设计稿设置根元素字体大小。内容涵盖引入meta标签、设置样式文件、确定根元素和body的字体大小，以及页面布局的划分。适合前端开发者参考。
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。
如果不按这个顺序引入，在数据量大或者网络延迟时&#
最低0.47元/天 解锁文章
2457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
