移动端微信页面的一些自己爬的坑

Posted 2020-09-21 爱coding

     最近公司又接了一个项目，我负责微信端页面的开发，想说一下这两天遇到的坑，其实以前也遇到过，只是当时没想着把它记下来，所以导致这次写页面浪费了我好长时间，所以今天准备把它下来，以防后患。

　　首先就是背景的问题，我看了设计图是上面白色的背景，下面灰色的背景，刚开始我觉得应该给它设置高度，写出来之后完全不像样，瞬间懵逼，这写的狗屎一样的代码，后来才明白它应该是以灰色为背景，上面的div加白色背景就可以了，这么简单我想了好半天，感觉自己从学校回来就没救了，还有就是给上面的div加padding，这个也是遇到的问题。

　　然后就是页面样式的问题了，因为用的是rem来设置宽、高和字体大小，刚开始用了js来设置不同屏幕下的html根字体的大小，后来觉得用的不顺手还是用了以前用的css来设置媒体查询，rem真的好用，谁用谁知道。用js来设置html的font-size字体大小，代码如下：

(function(){
      var html = document.documentElement;
      hwidth = html.getBoundingClientRect().width;
      html.style.fontSize = hwidth/15 + "px";    
})()

先就记录这些把，以后有坑再填！！！