移动端UI设计750揭秘
迎奥运移动端UI设计750揭秘
为何⼤家都选⽤750作为移动端页⾯的宽度尺⼨?
很多刚⼊门的ui⼩伙伴，不知道移动端为什么设计稿要做成750px宽, 今天我来阐述⼀下⾃⼰的想法, 以下是我个⼈见解，不喜勿喷.对于移动端页⾯, html的head中有⼀个
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这⼀句的作⽤是将⼿机的实际分辨率转换成逻辑分辨率, 为什么要这样做呢, ⼤家应该还朦胧的记得以前的⼀些页⾯在⼿机端打开的时候字⾮常的⼩, 以⾄于都看不清, 需要放⼤才能看清, ⽐如iphone实际横向分辨率是750, ⼀个被设置成font-size: 12px的字体会占屏幕宽的12/750，这样的字是⾮常⼩的, 但是加⼊上⾯的viewport之后, ⽹页的宽将会变成375px⽽不是750px, 那么12px的字将占12/375这么多了, 这样就⽐较正常了, 不太明⽩逻辑分辨率的同学可以⾃⾏百度⼀下’此像素⾮彼像素’. 有了这层知识我们就可以来揭秘750的秘密了.(本⽂中不加特殊说明说的分辨率均指逻辑分辨率).
⼤家都知道现在⼿机碎屏化越来越严重, ⽐如320, 360, 375, 412, 414等, 如果只有⼀种屏幕分辨率的话那么我们只做⼀个这个分辨率宽的设计稿, 但是如何兼容现在这么多分辨率的设备就是⼀个问题了, 为每
⼀个分辨率出⼀套⽅案显然不太可能, 技术成本将会加⼤, 于是iphone6的实际分辨率750就被关注到了, 理由如下:
移动端设备⼀般针对⼤多数⼿机和平板, 平板⼜是⽐较特殊⼀点, 因为平板⼿持⽅向不同, 调⽤的⽹页是不同的, 横向时⾛pc端样式, 竖向时⾛移动端样式.那我们切图的时候该怎么办呢?
刁民在都市现在我们可以做出⼀个750的设计稿, 1:1切给pad⽤, 不会有失真, 2:1(换算后是375)切给⼿机, 由于现在⼤多数移动端页⾯是采⽤rem布局实现的, 对于375及其以下的⼿机屏幕⾃然不会失真, ⽽对于375以上的⼿机设备,⽐如iphone6 plus 414的分辨率将会有少许失真, 图⽚将会被放⼤10%左右, 这是⼀个⽐较完美的折衷⽅案, 因为我们不可能为每⼀种分辨率设计⼀套⽅案, 所以注定会有⼀些设备上的图是失真的，那⼜有⼈问为什么不做个⽐较⼤的设计稿, 夸张⼀点做成10000宽, 这样做的话能解决图⽚的失真问题, 但是图⽚太⼤必定会占⽤更多的带宽, 从⽽导致加载过慢, 带来不好的⽤户体验.
好了, 这就是我理解的750, 在本⽂中我只提到了横向分辨率, 并未提到竖向的值是多少, 这是因为绝⼤多数的设备屏幕是根据16 : 9设计的，也就是⼤多数屏幕是⼏乎相似的(就是我们初中数学学的相似三⾓形的相似), 我们能从横向分辨率换算到纵向的, 出于这个原因我并未提起纵向分辨率.倾世皇妃连曦>lovestory
墙布十大名牌
希望能够对你有所帮助!2023五一补班补哪两天

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。