移动端设计与实现最佳方案
来源:互联网 发布:如何给mac磁盘分区 编辑:程序博客网 时间:2024/06/06 00:10
常识:
device-width == 设备物理分辨率 / ( devicePixelRatio * scale)
基本规则:
文字流式,控件弹性,图片等比缩放
方案1(网易做法):
1、<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
2、通过js计算html的font-size:
var fz = document.documentElement.clientWidth / (设计稿宽度 / 100) + px
document.documentElement.style.fontSize = fz;
3、css中 font-size 使用px配合媒体查询, 其他用rem(设计稿设计的大小/100 + rem)
4、deviceWidth 大于640时, 使用pc版
方案2(淘宝的做法):
1、根据devicePixelRatio动态设置scale
var scale = 1 / devicePixelRatio
2、计算html的font-size
var fz = document.documentElement.clientWidth / 10 + px
3、css中 font-size 使用px配合媒体查询, 其他用rem(设计稿标注尺寸 / 设计稿横向分辨率 / 10 + rem)
4、deviceWidth 大于540时, 使用pc版
关于设计与切图:
第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。
第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。
第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。
第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。
device-width == 设备物理分辨率 / ( devicePixelRatio * scale)
基本规则:
文字流式,控件弹性,图片等比缩放
方案1(网易做法):
1、<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
2、通过js计算html的font-size:
var fz = document.documentElement.clientWidth / (设计稿宽度 / 100) + px
document.documentElement.style.fontSize = fz;
3、css中 font-size 使用px配合媒体查询, 其他用rem(设计稿设计的大小/100 + rem)
4、deviceWidth 大于640时, 使用pc版
方案2(淘宝的做法):
1、根据devicePixelRatio动态设置scale
var scale = 1 / devicePixelRatio
2、计算html的font-size
var fz = document.documentElement.clientWidth / 10 + px
3、css中 font-size 使用px配合媒体查询, 其他用rem(设计稿标注尺寸 / 设计稿横向分辨率 / 10 + rem)
4、deviceWidth 大于540时, 使用pc版
关于设计与切图:
第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。
第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。
第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。
第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。
注意第三步,就要使用我们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办,其实很简单,按上图做一些相应替换即可,但是流程和方法还是一样的。解释一下为什么要在@3x的图里切,这是因为现在市面上也有不少像魅蓝note这种超高清屏幕,devicePixelRatio已经达到3了,这个切图保证在所有设备都清晰显示
前端文章收纳盒: i玩林( iwan0.com )
0 0
- 移动端设计与实现最佳方案
- 编号设计之最佳方案
- 详解移动端页面细线实现方案
- 移动端布局方案 讲解与实例
- H5与移动端的交互方案
- 移动远程控制PC设计与实现
- 移动审批工作流设计与实现
- 移动审批工作流设计与实现
- 移动购物APP设计与实现
- 超便携电脑游戏设计最佳方案
- word转pdf的最佳实现方案
- 移动端自适应方案
- Bmob解决移动端后台服务实现方案
- 安全登录系统的设计与实现方案
- 单点登录系统的设计与实现方案
- 安全登录系统的设计与实现方案
- 安全登录系统的设计与实现方案
- 单点登录系统的设计与实现方案
- RabbitMQ的管理与监控
- Eclipse的设置、调优、使用(解决启动卡顿等问题)
- Leetcode 219. Contains Duplicate II
- ReactNative环境配置(第1篇)
- [小狼毫]安装,现成的拼音配置方案
- 移动端设计与实现最佳方案
- 去掉手机上面的状态栏
- Unity3D手游开发实践《腾讯桌球》客户端开发经验总结
- MyEclipse10 中的两种FreeMarker插件的安装与配置
- NEFU 1114 expression
- 如何使用索引提高查询速度
- 使用Spring发送Email
- 雷神之锤 - 神一般存在的Sqrt函数
- 【HZAU】1013 Yuchang and Zixiang ‘s maze 宽度优先搜索