十五、移动端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博客

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

sketch 将动图转换为json_开源 | Picasso：sketch设计稿智能解析工具
开源二期项目专题系列(一) 1. 开源项目名称:Picasso 2. github地址: https://github.com/wuba/Picasso 3. 简介:Picasso是58同城推出的一款 ...
微信小程序开发的详细步骤是什么?
微信小程序开发的详细步骤如下: 1.注册微信小程序开发者账号:需要前往微信公众平台注册一个小程序开发者账号. 2.创建小程序:登录小程序开发者工具,创建一个新的小程序项目,并填写小程序基本信息. 3. ...
android开发分辨率,安卓APP设计规范之1080*1920设计稿对应开发尺寸
目前市场上,只有Android系统的手机才有1080P全高清的产品.1080P是说手机屏幕的分辨率达到1920*1080像素.1080P的屏幕最直观的改变当然是屏幕精细度的巨大提升,就算是5寸的屏幕, ...
Design Play 设计稿预览，实时预览设计效果，最好用的设计稿预览工具
[Design Play 设计稿预览]是一款能够实时预览Photoshop/Sketch/XD中设计稿的工具,专门为UI设计师.产品.研发等角色准备.它支持Wifi和扫码两种连接模式,能够主动发现PS ...
使用Anaconda3配置多版本Python虚拟开发环境详细步骤
有时候,为了使用比较干净的开发环境,或者为了测试一些版本的扩展库,我们可能需要创建虚拟开发环境,在不同的虚拟开发环境中,只安装需要的扩展库,这样可以最大程度上减少不同扩展库之间的兼容性带来的冲突或其他 ...
安卓APP设计规范(二)720*1280设计稿对应开发尺寸
这样的手机又vivo智能收款机.三星Galaxy A5.华为荣耀等手机. 这样的手机屏幕尺寸是:5寸即屏幕对角线是5英寸. 计算方法:1280平方+720平方＝2156800,结果再开 ...
安卓APP设计规范之1080*1920设计稿对应开发尺寸
第一部分app设计知识:什么是安卓1080P? 目前市场上,只有Android系统的手机才有1080P全高清的产品.1080P是说手机屏幕的分辨率达到1920*1080像素. 目前为止,市面上Andr ...
安卓APP设计规范(三)1080*1920设计稿对应开发尺寸
原文:http://www.25xt.com/appdesign/9487.html 第一部分app设计知识:什么是安卓1080P? 目前市场上,只有Android系统的手机才有1080P全高清的产品 ...
tiptop开发webservice详细步骤
一:服务端开发 1:tiptop所有的接口都是通过aws_ttsrv2.4gl 这个程序接收进来的,接口的地址一般是 [url=http://[tiptop_ip]/web/ws/r/aws_ttsr ...
微信小程序开发商城详细步骤
1.创建小程序项目: 使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击"创建"按钮,即可创建小程序项目. 2.添加页面: 在小程序项目中,可以添加多个页面, ...

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

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

最新文章

热门文章