美文网首页
UI设计布局在不同尺寸屏幕上的适配;约束,自动缩放,移动开发,

UI设计布局在不同尺寸屏幕上的适配;约束,自动缩放,移动开发,

作者: 万年老参 | 来源:发表于2022-07-19 16:42 被阅读0次

以iOS为例,视觉设计师们给的设计图一般以iphone6为准。
当屏幕大小变化时,可以将设计图分解为独立的一个个部分,对于每部分,分别有位置不变,位置根据屏幕变化,大小不变,大小根据屏幕变化,根据父视图变化几种情况。

对于随屏幕大小等比例变化的可以用以下宏自动计算大小:

#define iph6S(in)     (in*[UIScreen mainScreen].bounds.size.width/375.0)

开发过程中,对于不同屏幕空间大小和位置一般有以下几种处理方法:
一,距离某个屏幕边距离不变,或相对于父视图某个边,或邻近视图的距离不变。
常见于一些固定的按钮,nav,tab等导航UI,这类视图添加约束时一般可以添加固定距离约束,及固定大小约束即可
二,距离屏幕中心或父视图中心(或与中心距离固定)。
常见于默认图片或内容展示,此时添加居中约束即可。
可变参数:大小。此时可以根据屏幕尺寸与iphone6尺寸比,算出

相关文章

  • Flutter:适配学习

    flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! Flutter的适配可以使用flu...

  • 自动布局—屏幕适配及使用Swift第三方库SnapKit进行屏幕

    自动布局就要进行约束,约束就是为了适配不同尺寸大小的屏幕而对视图添加一定的条件,约束分手写和StoryBoard进...

  • iOS自动布局框架Masonry的使用

    我们知道做开发都需要屏幕适配,做屏幕适配就少不了界面UI的自动布局。那么自动布局的方式常用有哪些呢?在storyb...

  • UIDevice 扩展 - iOS检测设备类型

    在开发iOS 或 tvOS 应用的时候,Apple提供的自动布局通过动态计算视图大小来适配不同尺寸的屏幕,开发者再...

  • 支付流程(面试题07)

    1.屏幕适配:为了让我们开发的程序能够比较美观的显示在不同尺寸、分辨率、像素密度的设备上。1.使用约束布局或者相对...

  • vue 移动端适配

    vue适配:以750设计稿为基准,在不同屏幕尺寸下如何适配 Safari中设置了禁止用户缩放无效的问题: iOS ...

  • ios字体适配的三种实现方法

    大家先看下IOS字体规范与多屏幕适配的规律和在不同尺寸屏幕适配的UI布局: 在项目中肯定会遇到字体适配的问题,从上...

  • Flutter 屏幕适配、颜色、样式、Icon 管理

    1、屏幕适配 当前手机屏幕尺寸各不相同,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同。 为了达到一...

  • 关于移动端适配

    移动端适配只要在html上加个 这个750是指屏幕宽度,这个值改成UI设计稿上的宽度,然后下面所有的尺寸都按照设计...

  • 移动端自适应方案

    一、基础原理 1.基准值 (1)选择一种尺寸作为设计和开发的基准。(2)定义适配规则,自动适配其他屏幕下的尺寸。 ...

网友评论

      本文标题:UI设计布局在不同尺寸屏幕上的适配;约束,自动缩放,移动开发,

      本文链接:https://www.haomeiwen.com/subject/ixxyirtx.html