UI设计切图的点滴理解

https://www.xueui.cn/design-theory/figure-ui-design-specification.html
https://www.cdwanxun.com/zixun/show/4407.html
https://blog.csdn.net/xmlife/article/details/79806285
https://www.xueui.cn/tutorials/app-tutorials/mobile-ui-design-size.html?ref=r

https://blog.csdn.net/weixin_30407613/article/details/99566626?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.control

概念理解

1. 物理像素（又叫像素分辨率），屏幕自身固定的像素显示能力，比如现在手机系统显示里标注的750 * 1334、1242 * 2208、2340 * 1080、2K、4K等
2. 逻辑像素（又叫逻辑分辨率），通俗的讲其实就是指手机屏幕的宽高，由手机的尺寸决定的，比如3.5英寸、4英寸、4.7英寸、5英寸、6.5英寸等，单位为pt(ios)，dp(andriod), 1pt=1dp=dpr(px)
3. dpr（又叫设备像素比，倍率），物理像素/逻辑像素
   
4. 设计师是根据物理分辨率进行设计原稿，一般会参考较大分辨率的，然后向下适配，最终切出来的图也都是物理像素，而css的px为逻辑像素，需要进行换算，直接除以dpr即可！针对app客户端可以通过ps的cutterman插件快速生成不同尺寸的图标（a.png,@2x.a.png,@3x.a.png)

延申： webapp移动端设备自适应适配方案

1. 流式布局，流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是在众多终端尺寸面前，很难显示出视觉设计师和交互最想要的效果

• 左边固定，右边百分比自适应
• 右边固定，左边百分比自适应
• 左右固定，中间百分比自适应
• 等分布局

2. 固定宽度做法，早期偷懒的做法，设置主体固定宽度，超出部分留白，显然这个在高分辨率终端上面界面变小，旁白变大。超级难看
3. 响应式做法，这个主要在bootstrap等前端css框架出现后的主流做法，一般只是用简单的博客、小型门户类的网站，可以同时在pc和手机端兼容显示，说到底也是对于 媒体查询的封装，针对不同尺寸的手机渲染不同的样式布局，一些比较流行响应式轻量级框架比如Amaze UI、layui等。
4. 设置viewport进行缩放，天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

5. rem自适应布局，通过html根元素font-size的动态改变来影响其他页面元素的等比缩放，动态处理可以通过媒体查询、页面加载后js动态换算。
   https://www.jb51.net/css/709119.html
   https://blog.csdn.net/weixin_39939012/article/details/85257521