当前位置: 首页 > 网络应用技术

PC-端高 - 功率屏幕适应解决方案练习

时间:2023-03-05 21:26:31 网络应用技术

  随着PC屏幕的开发,PC侧逐渐出现了较高的变性屏幕。与手机上的视网膜屏幕相比,PC方面还有多种适应要求。对于PC侧

  随着屏幕技术的开发,越来越多的PC设备配备了大型高清屏幕。对于之前仅在PC上实现的Web应用程序,我们需要考虑类似于移动应用程序的移动应用程序的原理。请查看移动电话上高定义屏幕的原理。对于纸质媒体时代,我们经常使用DPI(每种调查点),即出口密度来描述印刷品的印刷精度。视网膜屏幕的概念,即通过不同的像素的不同密度图像信息描述单位屏幕上的密度,即相同大小但像素密度不同的屏幕。显示屏(即PPI(每英寸像素))不同。如上图所示,可以通过更多像素来描述相同细节的描述,以使信息提供更多细节。lem,请查看手机的常见改编解决方案

  对于UI设计,在移动设计过程中,我们通常需要考虑iOS和Android的设计。除了基本交互操作之间的差异外,两者的设计适应方案也是一个经常在UI访谈中提出的问题。对于UI设计,我们始终希望对同一应用程序对同一应用程序的相同感知应应基本上是一样的。除了系统的特定交互和显示样式外,我们还应该尽可能地弄平平台的差异。据说我们通常适应750x1334(ios @2x)和720x1280(Android和720x1280(Android) @ @2x)。对于PC End Web,您只需要设计一个尺寸并模拟视网膜的需求即可。基于此,我们需要调查考虑PC侧适配器策略的需求

  通过百度交通研究所,我们可以解决所需的改编:

  主屏幕设计,然后我们通过网格布局处理每个屏幕的兼容性

  为了适应多末端分辨率,我们是常用的解决方案

  媒体查询基于媒体的屏幕配置需要为每组仅需要更改root字体的屏幕编写一组样式REM+媒体查询。单元和浏览器兼容性不如REM

  最后,考虑到兼容性,我们决定使用REM+媒体查询方案适应高功率屏幕,但是如果完全基于REM进行单元重写,则设计草案的计算有一定数量的计算开发视图的发展视图。考虑使用前端工程进行统一魔术改革以改善DX(发展经验)

  我们使用PostCSS转换CSS代码。为了灵活配置和使用该项目,请参阅PX2REM实现PX2RM类,然后实现自定义PostCSS插件-in

  对于PostCSS,许多人被分析为后处理器。本质实际上是CSS语法转换器或编译器的前端。与诸如SCSS/SIMES之类的前处理器不同,它不是自定义的语言DSL DSLConverted。从上面的图中可以看出,PostCSS处理方法是通过Parser分析CSS,然后传递插件。最后,新的CSS是在stringifier.let之后输出的

  解析器的实现可以分为两种类型:一种是通过编写文件执行AST转换。诸如返工分析仪之类的常见;另一个是Postcss.的方法。它们是所有处理解决方案

  用于格式化输出CSS文本

  PostCSS定义的转换格式如下

  将作为以下格式的代币

  插件处理机制

  转换AST节点的处理

  UI设计手稿的高度恢复是前端工程师的最基本技能,但对于现代前端 - 我们不仅必须考虑解决方案,而且还必须具有工程思维来增强工程学的思维DX(发展经验)。为了降低成本并提高效率,毕竟,我们是前端工程师,而不仅仅是前端开发人员,也鼓励他们!