vue+thinkphp构建红包页面前后端第一篇

github源码:https://github.com/CiroMzy/redpocket

演示地址:http://mazhaoyang.cn/demos/redpocket/


首先我用vue的脚手架构建的webpack模板,css的预编译我用的是less,这里不做赘述,

第一,关于less

这里我在assets文件夹里创建了两个less文件,一个variables.less,一个main.less。variables.less是变量储存文件,

根据UI图,将颜色、字号等变量放在这里。其中,@r变量用来配合rem做适配的变量。

main.less是做整体样式调整。删除不想要的默认样式。

第二,关于适配

这里还是用的rem适配,在入口html文件头加上

在src中创建一个config文件夹,负责放配置文件。将rem.js放到改文件夹下。内容为:


(function(win) {
  var doc = win.document;
  var docEl = doc.documentElement;
  resizeFn ();
  window.onresize = function(){
    resizeFn ();
  };
  function resizeFn (){
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
  };
})(window);
然后在320宽的调试模式下,进行切图。这样配合之前的 @r:32rem,使当前像素与对rem进行对应。



随机浏览