移动端页面尺寸设计考虑的因素有哪些

发布时间：2022-05-14 08:20:11 作者：来源：浏览量（2084 ）

摘要：移动端页面尺寸设计考虑的因素有哪些？现在我们经常看到的电商网站的手机页面大都是直接按照移动端页面尺寸设计的，那么你知道移动端页面尺寸设计考虑的因素有哪些吗？小编就来与大家聊一聊这个问题。可以通过这个...

移动端页面尺寸设计考虑的因素有哪些？现在我们经常看到的电商网站的手机页面大都是直接按照移动端页面尺寸设计的，那么你知道移动端页面尺寸设计考虑的因素有哪些吗？小编就来与大家聊一聊这个问题。

可以通过这个测试页面 greenzorro.github.io/demo/basic/响应式断点.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。

以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点(Point)。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。

移动端页面尺寸设计考虑的因素有哪些？以上文章就是小编为大家带来的关于移动端页面尺寸设计考虑的因素有哪些的全部文字介绍了，希望对你有所帮助。