移动端界面设计之尺寸篇

Posted 2023-04-28

参考技术A 参考苹果官方文档尺寸详见：

iPhone 新机型 ： 状态栏高度 44pt 、导航栏高度 44pt 、 TabBar高度 49pt、 Home条68px
iPhone 旧机型 ： 状态栏高度 20pt 、导航栏高度 44pt 、 TabBar高度 49pt
间隔快：16pt

安卓机型 ： 状态栏高度 25dp 、导航栏高度 48dp 、 TabBar高度 48dp

20×20、 29×29、 40×40、 58×58、 60×60、 76×76、80×80、87×87、120×120、152×152、167×167、180×180、 1024×1024、

72×72、96×96、 144×144、 192×192

24px、28px、32px、36px等等。记住是偶数的。最小字号20px。

96px、128px等，因为要考虑iPad的适配，个人觉要把图标做的大一些

Ps安装一个 Ps Mirror 可以在手机上实时观看效果。（60块钱）

sketch安装一个 蓝湖 可以在手机上实时观看效果。（免费）
强烈推荐 "蓝湖" 。最好用的插件，没有之一

移动web开发之rem的使用

为什么要使用rem

　　移动端设备尺寸五花八门，单纯使用px这个单位无法轻易适配，rem就可以为我们解决这个问题！

如何使用rem

　　1rem默认等于16px，这是因为页面的默认字体大小就是16px。r 代表rootelement,因此只要修改html的font-size大小，就可以更改1rem的大小！

叮嘱UI设计师

　　移动端的设计稿尺寸要做成640*750的！移动端的设计稿尺寸要做成640*750的！移动端的设计稿尺寸要做成640*750的！重要的事情说三遍！（640固定，高度可变）

当拿到图后

　　一般人会人为将设计图按宽度方向分为若干份（不固定，好算即可），例如640宽的设计稿，分为20份，640/20 = 32,则32就作为设计稿中rem的单位，1rem就等于32px ，则在设计稿中量到一个宽度为100px的元素，实际项目就是 100/32 rem（就是将设计图中测量出来的尺寸转化为rem的值）

　　因此，在不同的设备中我们只需要去动态设置html的font-size = 设备宽度 / 20 （20是刚刚你分的份数）

　　以下代码直接在页面中写，而且要写在页面顶部，js要在页面打开时立刻执行！

　　<script type="text/javascript">
    　　// 根据屏幕的宽度 来设置 html的 font-size
    　　// 计算 font-size
    　　var fontSize = window.screen.availWidth / 20;
    　　document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;
　　　　 //浏览器窗口被调整时执行
    　　window.onresize = function () {
       　　 // 计算 font-size
        　　var fontSize = window.screen.availWidth / 20;
        　　document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;
    　　}
　　</script>