如何通过viewport vm实现移动端页面长尾词适配？

本文共计548个文字，预计阅读时间需要3分钟。

前言：作为一个小型前端，经常要与H5打交道，这就面临不同终端的适配问题。Flexible方案通过Hack手法，根据设备的dpr值相对改变meta标签中viewport的值，让我更贴近地体验。这通过js脚本实现。

前言

作为一个小前端，经常要和H5打交道，这就面临着不同终端的适配问题。

Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值，给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值，然后就运用rem单位开发可以等比例缩放的H5页面。

但是！Flexible已经完成了他自身的历史使命，我们可以放下Flexible，拥抱新的变化。

做到适配要解决的问题

• 在移动端布局，我们需要面对两个最为重要的问题：
• 各终端下的适配问题
• Retina屏的细节处理

不同的终端，我们面对的屏幕分辨率、DPR、1px、2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题，只不过解决这些问题不再是使用Hack手段来处理，而是直接使用原生的CSS技术来处理的。

适配终端

以前的Flexible方案是通过JavaScript来模拟vw的特性，那么到今天为止，vw已经得到了众多浏览器的支持，也就是说，可以直接考虑将vw单位运用于我们的适配布局中。