项目最初给的意见是,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端也能正常视图打开移动端!