今天是
当前位置:微山新闻资讯 > 系列报道 >

app软件开发如何适配不同的屏幕尺寸显示

时间:2019-07-30 18:30 来源: 作者:微山新闻资讯

随着移动互联网的不断发展,越来越多的app软件在开发过程中都需要适配不同的屏幕尺寸,下面我们就一起来了解一下具体问题都有哪些。

基本概念

app软件开发如何适配不同的屏幕尺寸显示

物理像素

又叫设备像素,一个物理像素是屏幕上的小显示单元,每个像素都有自己的显示颜色和亮度,例如,屏幕上显示的一张100px*100px的图片,实际上是由很多个拥有颜色和亮度的像素点组成。

设备独立像素

又叫做密度无关像素、逻辑像素,是由程序可以控制的虚拟像素,我们样式中的css像素也是逻辑像素的一种。系统会将逻辑像素转化为设备像素展示。

设备像素比

物理像素与设备像素之间的关系就是设备像素比,dpr = 物理像素/设备独立像素。

可以通过 window.devicePixelRatio 获取设备像素比。

flexible

1.引入flexible.js文件

flexible.js可以下载到本地工程引入,也可以引cdn上的远程文件,该文件执行会自动生成 标签,不需要手动写

2.开发使用

由于会自动生成meta标签,并自动设置html标签的font-size属性,所以只需要按照设计稿写rem单位的css即可。默认iphone6 1rem = 75px,其计算方式是1rem=document.documentElement.clientWidth*dpr/100 = 375*2/100=75px

无轮以上那种方式,在开发模式上可以用同一种,以iphone6为标准,UI出750*1334(高度不固定)的设计稿,前端开发元素大小同设计图。

px转rem方式

px转rem有几种比较好用的方式

1、不用sass,less,直接在写css的过程中自行计算rem,麻烦耗时并且开工作量大,如果以后改变rem对px的开发标准,那么全部需要重新计算。

2、 使用sass开发,且不用构建工具,那么可以使用sass的混合宏、函数计算rem;也可以IDE安装转换插件。

【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!

通知公告
百姓心声
友情链接: