项目最初给的意见是，pc一套前端代码，wap一套代码，并没有说手机端在电脑上打开正常显示的需求。因此，我最后移动端单位用了vw/vh进行布局，没想到的是，需求变了，噩梦开始了！

遇到的问题：

1.css中部分属性重复率高，未抽出，如下图：font-size等属性

2.html中css内嵌到代码中，兼容时，TMD必须剥离出来，都是泪啊！

 总结一下心得：
  1.  1.公用样式尽量抽出，例如字体大小，主要颜色等，兼容时仅调整公用样式即可！ 
  2.  2.html里面千万不要嵌入css,例如：<div class="right" style="margin-top: 2.5vw;">，因为兼容的时候，你需要重新命名一个元素，再兼容； 
  3.  3.html代码块尽量模板化，增强代码复用性,即便不能模板化，css样式一定要放全局里面，否则... 
  4.  4.公共的js也合并打包在一个文件夹里面，这样不需要每个页面都复制粘贴！

代码兼容，整整浪费了一周时间，大脑都窒息了，以后还是省点心吧！REM~REM~REM....

最后建议，写手机端的话，还是改用rem单位吧，至少需要兼容pc的话，仅修改html的:root 大小就可以了！具体用法可参考《前端rem和vw单位结合，pc端也能正常视图打开移动端！》》