css做响应式布局，经常会用到em，rem等单位来布局，我们普遍的项目使用的是rem来进行布局，而且对于rem来布局，相应的编辑器都有对应的插件，但是使用rem来布局，有个缺点：设置HTML的font-size后，需要在页面中使用JS来动态改变HTML根元素的font-size，从而实现响应式布局，略显麻烦，而且有时候回出现闪烁的情况。
解决这个rem布局的这个bug可以使用CSS3的vw来进行响应式布局。
先理解下视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1%的视口高度，1vw 等于1%的视口宽度。
比如：视口高度为：750*1080px，那么：1vw = 7.5px，1vh = 10.80px
怎么快速的换算出vw？
使用起来vw确实不错，但是如何快速的换算呢？难道我们每写一个样式，还要去手动的换算vw吗？这样的效率极低
解决方法：
就目前来说，vue有比较成熟的解决方法，对于使用编辑器来说，例如我用的是sublime编辑器，并没有类似的插件。
我的解决方法：利用cssrem来做转化，这个插件的好处在于可以快速的将像素转化为rem，更改转化比例就可以进行快速转化。
例如：我的是750px的设计稿，在sublime中配置rem的转化是：75（cssrem.sublime-settings）
{ "px_to_rem": 75, "max_rem_fraction_length": 6, "available_file_types": [".css", ".less", ".sass"] }
如果要按照这个来换算：1px = 7.5vw，所以需要更改配置：
{ "px_to_rem": 7.5, "max_rem_fraction_length": 6, "available_file_types": [".css", ".less", ".sass"] }
这样就进行了转化，但是有个缺点：每次px转化后的单位是rem，还需要将rem改为vw:
选择100px ->rem(7.5)
然后将rem改为vw：
以上是我的处理方式，以后如果有更好的解决方法，我会进行更新。