shij

文章看了两遍，第一遍没看多大明白，不过看了作者推荐的几个链接之后, 又自己用浏览器去验证基本上就明白了，感觉概念太多，不易理解，我觉得把浏览器里面的screen.width, window.innerWidth, window.devicePixelRatio这三个东西的关系搞明白就可以了, 视口的概念我觉得不要搞那么复杂，视口可以直接理解为手机屏幕，视口的宽度就是window.innerWidth, meta标签里的viewport属性，不管是对其缩放，还是直接对其宽度进行设置，最终是确定一个合理的window.innerWidth, 也就是使在不同设备上window.innerWidth的值大致接近或者相同，这样就做到了适配，手淘rem方案，它做到的就是对于iphone将window.innerWidth还原到实际物理像素宽度,而android则将window.innerWidth设置的与screen.width一致，然后用rem单位进行统一布局，用px进行针对各个设备的布局.初步理解，勿见怪

> 描述里加一个具体的例子？ 这是 `umi setup` 之后 layout 插件生成的 runtime 文件，可以看到 `formatIcon` 这个函数没有实现它的目的，这里应该是要将 `line-chart` 这种格式转换成 `LineChart`，也就是将 kebab-case 转换成 PascalCase，这个错误的原因是插件代码里的字符串转义导致丢失了 "\\"，所以修正的的代码会变成 `.replace(/-(\w)/g` `src/.umi/plugin-layout/runtime.tsx` ```ts // @ts-nocheck // This file is generated by...