大家都知道rem可以做响应式布局，但是需要根据屏幕指定html元素上的font-size样式宽度。之前用@media媒体查询根据各种屏幕宽度写html样式，也用过lib-flexible之类的js库动态改变html样式，总感觉很麻烦。今天突然想到vw单元，发现用它做响应式布局很方便。只有一行css:html{font-size:26.66667vw!important;}屏幕标准宽度为375px，全宽为100vw，即：100vw/375px=0.2666667vw/px，即每像素0.2666667vw。为了调试时方便转换，我们设置1rem=100px，即1rem=26.66667vw。这个值也可以根据你的需要进行调整。然后，我们可以直接在样式中使用rem，结果就是一个响应式布局。当然，如果你还想更方便，也可以在css代码中直接使用px作为单位，然后在构建webpack时使用工具postcss-pxtorem将px转换为rem单位。这样写代码的时候直接根据UI图的标签写像素值就可以了。配置如下：{loader:'postcss-loader',options:{plugins:[require('postcss-pxtorem')({rootValue:100,propList:['*']})]}}这个rootValue：100值，对应上面的换算关系。如果你想调整它，你必须在这里调整它。具体实现的完整代码可以参考：https://github.com/hzsrc/vue-...
