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
Conceptual understanding
- Physical pixels (also called pixel resolution), the fixed pixel display capabilities of the screen itself, such as 750 * 1334, 1242 * 2208, 2340 * 1080, 2K, 4K, etc. marked in the current mobile phone system display
- Logical pixels (also called logical resolution), in layman's terms, actually refer to the width and height of the mobile phone screen, which are determined by the size of the mobile phone, such as 3.5 inches, 4 inches, 4.7 inches, 5 inches, 6.5 inches, etc. The unit is pt ( ios), dp(andriod), 1pt=1dp=dpr(px)
- dpr (also called device pixel ratio, magnification), physical pixel/logical pixel
- Designers design manuscripts based on physical resolution. They generally refer to larger resolutions and then adapt downwards. The final cut images are also physical pixels, and css px is logical pixels, which needs to be converted directly. Just divide by dpr! For app clients, you can quickly generate icons of different sizes (a.png, @2x.a.png, @3x.a.png) through the ps cutterman plug-in.
Extension: webapp mobile device adaptive adaptation solution
- Fluid layout, the solution of fluid layout has many disadvantages. Although it can adapt to various screens, in the face of many terminal sizes, it is difficult to display the effects that visual designers and interactions want most.
- Fixed on the left, adaptive percentage on the right
- Fixed on the right, adaptive percentage on the left
- Left and right fixed, middle percentage adaptive
- equal distribution
- The fixed width method is a lazy approach in the early days. Set the main body to a fixed width and leave the excess part blank. Obviously, this will make the interface smaller and the narration larger on high-resolution terminals. super ugly
- Responsive approach, which is a mainstream approach mainly after the emergence of front-end CSS frameworks such as bootstrap, is generally used for simple blogs and small portal websites. It can be displayed on PC and mobile phones at the same time. In the final analysis, it is also an encapsulation of media queries. To render different style layouts for mobile phones of different sizes, some popular responsive lightweight frameworks such as Amaze UI, layui, etc.
- Set the viewport to zoom. The homepage of Tmall's web app is done in this way. The width of 320 is used as the benchmark for scaling. The maximum scaling is 320*1.3 = 416. Basically scaling to 416 is compatible with iPhone 6 plus. screen, this method is simple, crude, and efficient. To be honest, I think it is very efficient when using rem, which we are going to talk about next. However, some students reported that zooming will cause some page elements to be blurred during use.
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
- rem adaptive layout affects the proportional scaling of other page elements through dynamic changes in the font-size of the HTML root element. Dynamic processing can be done through media queries and js dynamic conversion after the page is loaded.
https://www.jb51.net/css/709119.html
https://blog.csdn.net/weixin_39939012/article/details/85257521