5.9w+
社区成员
- 主页
- 问答
APP尺寸大小该怎么设置呢？做出来的在手机上测试分辨率总是不对.
APP尺寸大小该怎么设置呢？做出来的在手机上测试分辨率总是不对.
...全文
请发表友善的回复…
发表回复
dieweiliao0477 2018-12-26
px+百分比方式适配
在我看来，这种适配方式应该是最简单的，将宽度全部使用百分比的形式处理，而高度根据设计稿给出的高度来处理。并且对于各种设备都是挺友好，但是我发现有一个问题就是，对设计稿的还原度不是很高，因为设计稿上应该标的宽度和高度都是px，（ps：找美工MM把宽度改成百分比来表示也不失为一种办法，^ _ ^）因此有时候得到的页面效果不是很理想，毕竟设计者是按照每个像素每个像素抠的，然后我们拿到后几个像素几个像素的误差来做，还是有点说不通。因此，我觉得对于简单的应用或者对界面要求不高的界面可以使用这种方式来做。
viewport方式适配
这种方式理解起来可能要难一点，不过其实还是很简单的，我这里讲的可能比较的简单，具体的这种方法的应用，各位可以自行百度，下面我就简单的说说这种适配方式。
首先我们都知道HTML5里面有个<meta /> 标签，并且有个viewport属性
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sc
这种适配方式想要适配不同机型，还需要搭配媒体查询，或是JS动态计算。
使用媒体查询时，我们需要具体的知道需要适配的屏幕精确的屏幕宽度或者范围，一般是使用范围进行适配，当遇到比较特殊的情况再单独处理，还可以在页面未渲染时，
使用JS动态计算时，需要获取屏幕宽度做一个计算，然后根据计算到的倍数精确的设置页面缩放的倍数。
两种方式各有利弊，使用媒体查询比较的麻烦，并且可能有些尺寸我们没考虑到，而使用JS动态计算，会降低页面渲染时间，我们都知道JS的执行是阻塞页面渲染的。
rem适配
首先我们都知道em和rem，并且我就默认大家都知道这两个单位是干嘛的了（不知道的可以自行百度哟）我们要做的事是什么呢，将网页的根元素的font-size设置一个动态计算到的值，然后将页面上所有的尺寸换成rem来处理，简单的说就是
在我看来，这种适配方式应该是最简单的，将宽度全部使用百分比的形式处理，而高度根据设计稿给出的高度来处理。并且对于各种设备都是挺友好，但是我发现有一个问题就是，对设计稿的还原度不是很高，因为设计稿上应该标的宽度和高度都是px，（ps：找美工MM把宽度改成百分比来表示也不失为一种办法，^ _ ^）因此有时候得到的页面效果不是很理想，毕竟设计者是按照每个像素每个像素抠的，然后我们拿到后几个像素几个像素的误差来做，还是有点说不通。因此，我觉得对于简单的应用或者对界面要求不高的界面可以使用这种方式来做。
viewport方式适配
这种方式理解起来可能要难一点，不过其实还是很简单的，我这里讲的可能比较的简单，具体的这种方法的应用，各位可以自行百度，下面我就简单的说说这种适配方式。
首先我们都知道HTML5里面有个<meta /> 标签，并且有个viewport属性
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sc
这种适配方式想要适配不同机型，还需要搭配媒体查询，或是JS动态计算。
使用媒体查询时，我们需要具体的知道需要适配的屏幕精确的屏幕宽度或者范围，一般是使用范围进行适配，当遇到比较特殊的情况再单独处理，还可以在页面未渲染时，
使用JS动态计算时，需要获取屏幕宽度做一个计算，然后根据计算到的倍数精确的设置页面缩放的倍数。
两种方式各有利弊，使用媒体查询比较的麻烦，并且可能有些尺寸我们没考虑到，而使用JS动态计算，会降低页面渲染时间，我们都知道JS的执行是阻塞页面渲染的。
rem适配
首先我们都知道em和rem，并且我就默认大家都知道这两个单位是干嘛的了（不知道的可以自行百度哟）我们要做的事是什么呢，将网页的根元素的font-size设置一个动态计算到的值，然后将页面上所有的尺寸换成rem来处理，简单的说就是