关于javascript:前端知识点提炼五月份

1. 必须搞懂的挪动端适配 UI 像素概念

css 里边 px 到底是什么?

是 viewport 像素，不是物理像素，不是逻辑像素，不是渲染像素。

• 逻辑像素 / 点(像素)（device point / device pixel / point），是为了和谐间隔不一样导致的差别，将所有设施依据间隔，透视缩放到一个相等程度的观看间隔之后失去的尺寸，是一个形象的概念，这个单位就是 ios 开发的 px，安卓开发的 dp。对于 pc，包含 win（8+）linux，mac，由各自零碎的或者对应软件（比方 webview 外部）提供的图像界面解决引擎解决进行缩放
• 物理像素 （physical pixel）就是反映显示屏的硬件条件，反映的就是显示屏外部 led 灯的数量，能够简略了解，一组三色 led 代表一个物理像素，当然依据屏幕物理属性以及解决 led 的办法不一样。强调这是物理的，因为这是一个纯硬件指标。比方我把屏幕锯了一半，物理像素就只有一半。 所以咱们个别说的 分辨率 / 像素分辨率 就是 物理像素
• 渲染像素 （render pixel），则是在零碎外部对物理像素的调配进行再一次的调整，在 pc 上，渲染像素其实就是设置里边的分辨率。对于显示设施，零碎为显示设施提供渲染尺寸，由显示设施的“缩放引擎”（带存储器阵列的数字视频处理器）解决。这种“缩放引擎”个别外部有一系列的正当分辨率和一个举荐分辨率。个别举荐分辨率就是最大渲染像素，也是设施的物理分辨率（为了最佳体现）。这是一个软硬件（偏硬）联合的缩放计划。 因为局部设施不能设置渲染像素，所以咱们简化形容间接跳过渲染像素，间接等同于物理像素。逻辑像素的引入，简略来说，就是为了打消了不同屏幕观看间隔和不同 ppi（见下文）之间的差别，衍生进去的一个虚构的尺寸。
• ppi（pixel per inch）每英寸像素，指的是屏幕在每英寸的物理像素，更高的 ppi 意味着屏幕的清晰度更佳。所谓视网膜屏，其实就是指在该观看间隔内超出人类的识别能力的屏幕。比方对于桌面设施，大于 192ppi。对于挪动设施大于 326ppi。
  假如一个 ppi160，2 寸 x3 寸的屏幕，物理像素应该是 320×480。同理 ppi320，同样尺寸的屏幕，物理像素是 640×960。
• viewport 像素 实质是 DIP（Device Independent Pixels），中文意思设施无关像素，是与上述所有像素都无相对逻辑关系的一个单位。其实是浏览器外部对逻辑像素进行再解决的后果，简略来了解就是调整逻辑像素的缩放来达到适应设施的一个中间层。

面向逻辑像素开发的根本开发流程

1. 在 head 设置 width=device-width 的 viewport，其实就是让 viewport 的尺寸等于逻辑像素的尺寸
2. 在 css 中应用 px
3. 在适当的场景应用 flex 布局，或者配合 vw 进行自适应
4. 在跨设施类型的时候（pc <-> 手机 <-> 平板）应用媒体查问
5. 在跨设施类型如果交互差别太大的状况，思考离开我的项目开发

对于 px 的疑难

不同设施的物理像素是不一样的呀，我怎么实现不同物理像素的布局，如果设计师给你一张图，怎么将它转为我想要的在 css 里边的 px。

首先，你要读懂设计师给你设计图的用意，个别国内的设计师，给出手机版的设计图，个别是 750px，留神这里的 px，并不是咱们的 px（逻辑像素），其实是物理像素，因为设计师是依据 iphone6 或者等同设施来进行设计的，那么要晓得 iphone6 的逻辑像素其实是 375，dpr 是 2，那么拿到手的设计稿，转换为逻辑像素，就得除以 2，咱们叫这种设计图，叫两倍图。

同理，如果是 375 + 375 + 375 大小，那么咱们就得除以 3，叫三倍图。

如果设计团队有应用墨刀或者蓝湖，你能够在两者里边设置你的查看尺寸，失去咱们须要的逻辑像素。

如果设计师不必蓝湖等工具，给你的并不是 375 的倍数怎么办，我先说方法，起因你们本人推敲，我不粗疏剖析。

最简略的办法，设计师给你的图的物理宽度 w，除以一个数 x，如果得的进去的商在 360 – 414 之间，那么你换算的公式为【你在设计图测量进去的物理像素数除以 x】，那么 dpr 就是 x，也就是 x 倍图。