简介近期工作主要关注移动端场景及大屏场景业务开发。本文主要对这些项目中应用的移动端适配方案进行梳理和总结。视口配置在移动开发场景下，推荐的视口初始配置（）如下：width=device-width——使当前视口宽度与设备宽度一致user-scalable=no——禁止usertoScalingoperationinitial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0——设置每个缩放比例为1.0高清方案DPR（devicepixelratio）物理像素、逻辑像素和设备像素比例。为什么会出现以上概念呢？因为手机屏幕普遍采用视网膜屏技术，即用多个物理像素渲染一个逻辑像素，从而使屏幕显示效果更好、更清晰、更细腻。物理像素（devicepixel）：指设备屏幕上的实际像素，即设备的实际分辨率。逻辑像素（CSSpixel）：指设备系统设置的像素。对于开发者来说，就是实际开发中使用的像素（系统设置的像素）。设备的逻辑像素可以在Chrome开发者面板中查看。DevicePixelRatio(DPR)：指在一定方向（即宽度方向或高度方向）上物理像素与逻辑像素的比值（physicalpixels/logicalpixels）。DPR越高，设备的显示效果越清晰细腻。以iPhone12Pro为例：物理像素：宽度方向1170像素，高度方向2532像素，即尺寸为1170*2532。逻辑像素：当Chrome开发者工具使用iPhone12Pro作为当前设备时，对应的尺寸为390*844。即设备像素比为1170/390=3。由于设备像素比的出现，在开发中，为了保证图片的显示清晰度，需要在不同的情况下加载不同尺寸的图片DPR（多个图像）。在JavaScript中，可以通过window.devicePixelRatio获取设备像素比。在CSS中，可以通过-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratio等获取设备像素比，以上属性需要用于媒体查询修改背景图像，仅支持基于webkit的浏览器。@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min-device-pixel-ratio:2){}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3),onlyscreenand(min-device-pixel-ratio:3){}1pxborder当设备的DPR大于1时，比如当DPR为2时，表示实际渲染1px在屏幕上的效果比DPR1设备的厚度增加了一倍（这是因为DPR2设备使用2个物理像素来渲染1个逻辑像素），导致视觉效果与预期效果不一致设计稿，即使使用vw或rem作为border-width单位，但尺寸可能小于1px，无法兼容各种浏览器。推荐通过伪元素+transform缩放比例实现1px边框，如下：创建一个height:1px伪元素，用transform:scaleY(0.5)加倍，使用绝对定位判断是否为top-底部边框或左右边框。.scale-1px{位置：相对；border:none;}.scale-1px::after{内容：'';位置：绝对；底部：0；背景：#000；宽度：100%；高度：1px；-webkit转换：scaleY(0.5)；变换：scaleY(0.5)；-webkit-transform-origin:00;transform-origin:00;}proportionalscalingadaptationproportionalscalingadaptationscheme：让页面中元素的大小和文字大小随着屏幕大小的缩放比例缩放，可以通过rem、vw等相对单位来实现。remschemerem：相对单位，表示相对于html标签的font-size的大小。rem方案的实现步骤：监听屏幕宽度的变化，动态设置html标签的font-size的大小（可以通过JavaScript或者mediaquery实现），这样随着屏幕尺寸的变化，大小元素和文本的比例也会发生变化。JavaScript实现：通过JavaScript监听屏幕宽度的变化，从而动态修改html标签的font-size值。媒体查询实现：通过媒体查询根据不同的屏幕宽度（覆盖不同机型的屏幕宽度）设置对应的htmlfont-size值。以设计稿的宽度为屏幕宽度标准，将html标签的font-size的初始值设置为1px，则页面中的元素单元可以直接使用设计稿对应的尺寸值（单位为rem），其他屏幕宽度的font-size值为屏幕宽度/设计稿宽度。页面上元素的宽度、高度、边距、文字大小统一以rem为单位。需要将设计稿的px值转换成对应的rem值，转换公式：设计稿px值/html标签font-size值=rem值相关插件px转rem：https://github.com/cuth/postcss-pxtorem动态设置html标签的font-size：https://github.com/amfe/lib-flexible缺点：需要引入额外的JavaScript监听屏幕宽度变化动态改变font-size的html标签，使用媒体查询时会有适配“故障”的问题，由于浏览器已经支持vw单位，所以建议使用vw方案，而不是rem方案。vwSchemevw：相对单位，表示相对于当前视口宽度的百分比，1vw表示当前视口宽度的1%。vh：相对单位，表示相对于当前视口高度的百分比，1vh表示当前视口高度的1%。vmin：相对单位，表示相对于当前视口较小尺寸的百分比，1vmin表示当前视口较小尺寸的1%（常用于需要横向适配的情况）。vmax：相对单位，表示相对于当前视口较大尺寸的百分比，1vmax表示当前视口较大尺寸的1%。vw方案的实现步骤统一使用vw/vmin作为元素的宽高、边距、文字大小的单位。以375px尺寸的设计稿为例，推导出1px等于多少vw：375px/1px=100vw/?vw?vw=100/375?vw=1/3.75即375px/1px=100vw/1vw/3.751px=1vw/3.75设计稿px值转vw值公式：设计稿对应元素尺寸/设计稿宽度/100=vw值建议使用设计稿尺寸进行开发，然后使用postcss-px-to-viewport插件实现自动转换。缺点：不支持设置页面最小宽度和最大宽度，即使当前屏幕小于最小宽度或大于最大宽度，页面元素大小仍会随屏幕变化。rem+vw方案结合使用rem+vw方案实现比例缩放适配，支持设置页面最大或最小宽度。实现步骤设置html标签的font-size值为vw的值，1vw相当于屏幕宽度的1%，以750px设计稿宽度为例：1vw=750/100=7.5px1px=1vw/7.5px=0.133333vw那么html标签的font-size值设置为0.13333vw，页面元素和文字的大小要与设计稿对应的元素大小一致（单位为rem）。html{font-size:0.133333vw;}/*对于PC，屏幕宽度超过750px。*/@mediascreenand(min-width:750px){html{font-size:1px;}}div{宽度：200rem;height:150rem;}局限和应用场景等倍放大意味着更大的屏幕无法显示更多的内容，但在某些场景下，用户可能希望在更大的屏幕上尽可能多地看到更多的内容。因此，在信息流等阅读内容较多的场景，推荐使用px+flex布局；对于视觉元素较多的场景，使用vw适配，当需要设置场景的最小或最大宽度时（如大屏开发场景），使用rem+vw适配。
