请选择
进入手机版
|
继续访问电脑版
设为首页
收藏本站
社区
社区板块
YonBuilder应用构建
可视化低代码开发
YonBuilder移动开发
多端移动低代码开发
智友RPA
自动化流程机器人
生态产品&OpenAPI
服务于共创生态产品和接口调用开发
数据分析
全流程、一站式的数据服务
内部板块
YonBIP高级版
为用户提供学习成长、分享交流平台
YonBIP客开
专注服务于客户化开发
YonLinker&集成资产
便捷的应用配置和接口调用开发
关注我们
关注用友开发者中心公众号
快速获取产品动态和技术干货
开发者学堂
学习资料
视频学习
丰富的课程学习资源,随时随地学习
文档资源
开发文档,快速掌握开发技巧
技术博客
干货知识,专业的开发经验分享
免费源码
用友开发者专属福利
开发平台
YonBuilder应用构建
无代码、低代码构建企业级业务应用
YonBuilder移动开发
一次开发生成多端高性能的企业级移动应用
智友RPA
通过设定程序完成特定任务,替代繁琐和重复工作
开发工具
助力开发者高效构建商业应用
新手训练营
YonBuilder移动开发训练营
免费课程资源,快速掌握移动开发技术
开发者服务
生态合作
加入用友生态客开伙伴
成为客开伙伴,项目合作促进技术变现
企业服务
试用许可申请
不同产品线的License许可申请
App、小程序、网站等定制开发服务
专业/高效的软件定制服务,支撑企业商业创新
平台活动
开发者活动
更有趣的活动,更干货的直播分享
积分商城
帖子
帖子
用户
博客
课程
帖子
帖子
用户
博客
课程
历史搜索
删除历史
热门搜索
换一批
热门课程
换一批
登录
注册
个人中心
今日签到
私信列表
消息中心
搜索全站
扫码关注官方微信
扫码下载APP
返回顶部
YonBIP开发者社区
›
YonBIP开发者社区
›
YonBuilder移动开发
›
分享区
›
关于apicloud教程里的量图方法,有点不妥,分享一下我的 ...
返回列表
显示全部楼层
simpleway
当前离线
simpleway
19
帖子
0
勋章
441
Y币
关于apicloud教程里的量图方法,有点不妥,分享一下我的方法
[复制链接]
发表于 2017-3-20 11:07:59
本帖最后由 simpleway 于 2017-3-27 11:13 编辑
教程里面是建议量图的像素值,直接除以2,其实这个是以目前浏览器的放大倍数大概是2为基础的,我想说,如果以后屏幕发展到4K,8K的时候,那时候浏览器的放大倍数还会停留在这个倍数阶段吗?到了那时候,我们的app会显得特别小,因为代码里面用的是px单位,修改代码还很麻烦,只能修改浏览器的整体放大倍数了吧
为了解决这个问题,我用rem单位,在每个页面<head>里面引用一个js文件,内容如下:
var design_width = 540;//这个是你的ui设计图的px宽度
document.documentElement.style.fontSize = (window.innerWidth/design_width)*100 + "px";
或者,如果你更加关注高度的等比例适配,js内容可以这样:
var design_height =1280;//这个是你的ui设计图的px高度
document.documentElement.style.fontSize = (window.innerHeight/design_height)*100 + "px";
实际当中,用高度计算的情况会比较多,因为我们量得较多的都是字体高度、div高度、div垂直间距等,都是属于纵向的衡量,让纵向比例和UI图保持一致,出来的适配效果会更好
这样,在量图的时候,假如量出来是20px,直接除以100,那它的大小就是0.2rem。这样的做法有个好处,无论什么设备,最终做出来的每个html元素,相对于屏幕大小的比例都是差不多的,屏幕适配非常不错,而且就算要整体调整大小,只要调整上面js文件里的算法就可以,很方便
评分:
APICloud官方: Y币
+ 30
查看全部评分
4037
收藏
0
举报
分享
QQ空间
新浪微博
微信扫一扫
快速回复
YonBIP社区
当前离线
YonBIP社区
1682
帖子
10
勋章
441
Y币
感谢分享
#沙发
回复于2017-3-21 18:36:57
举报
回复
simpleway
当前离线
simpleway
19
帖子
0
勋章
441
Y币
有人可能会有疑问,为什么不把算法改为:
document.documentElement.style.fontSize = (window.innerWidth/design_width) + "px";
这样,量图的时候,量出来是20px,就可以直接写成20rem了,没错,这样的确很好,但是,这样有个问题,1个rem单位有可能等于0点几的px值,在android机器发现,1个rem如果等于0.7以下的px值,rem单位会无效,所以还是使用我上面提出的算法比较保险
#板凳
回复于2017-3-23 10:20:37
举报
回复
simpleway
当前离线
simpleway
19
帖子
0
勋章
441
Y币
本帖最后由 simpleway 于 2017-3-27 11:12 编辑
给出我的js文件内容:
/*
实现量图时,
量出来的px值直接除以100,得出rem值
,如20px就是0.2rem,这里故意放大100倍,是为了兼容android4.2等低版本浏览器,因为1rem如果=5px这样小的值,浏览器会忽略掉
*/
(function () {
var design_height = 1280;//UI设计图的px高度
var scale = 1.0;//后期调整这个值调整整体大小
window.__remConfig_flag = (window.innerHeight / design_height) * 100 * scale ;
document.documentElement.style.fontSize = window.__remConfig_flag + "px";
})();
//根据rem值,获取实际的px值
function getPixelByRem(remValue)
{
return window.__remConfig_flag * remValue;
}
#地板
回复于2017-3-26 06:18:06
举报
回复
simpleway
当前离线
simpleway
19
帖子
0
勋章
441
Y币
如果你要使用UIScrollPicture等模块,需要用到高度时,比如说量图出来,高度是20rem,那么需要用getPixelRem转一下,因为UI模块只认px值
var UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: getPixelByRem(20)
},
#5
回复于2017-3-26 06:20:43
举报
回复
福大亨
当前离线
福大亨
63
帖子
0
勋章
518
Y币
高人,感谢分享!
#6
回复于2018-7-12 21:58:49
举报
回复
Syx007
当前离线
Syx007
3
帖子
0
勋章
724
Y币
px 到 rem 的转换很实用 !
#7
回复于2018-7-13 17:03:20
举报
回复
THEFree
当前离线
THEFree
8
帖子
0
勋章
178
Y币
我开发项目,都是估摸着大小
因为现在手机大小各异,如果按照设计图来施工,不同的手机会遇到不同的问题
#8
回复于2018-7-13 23:43:16
举报
回复
B
Color
Link
Quote
Code
Smilies
高级模式
您需要登录后才可以回帖
登录
本版积分规则
回帖后跳转到最后一页
发表回复
返回顶部
返回列表
徽章中心还有更多好玩的勋章,快去查看吧~
查看详情