2016最后一天+本周一点内容总结
转眼已经到了2016年最后一天，时间飞逝，想要感慨，却发现千言万语都说不出来，生活方面一团糟，工作不够稳定，技术依旧有待提高。。。
最后一天，本想敷衍了事，然后出去转转吧，虽然口袋里没有几个钱，还是下午去外滩走走看看吧。
想要写一篇技术博客，但是真的技术本来就不怎么好，而且这一周的项目，boss不在，经理请假，我们一群年轻人，天天在公司蹭时间，等放假，哎，真的不好，不好。
想要写一写心情，毕竟大家写的都有2016年的一年反思和总结，或好或坏，或喜或悲，我也想说一说，但是打开博客编辑的一瞬间，思绪全无，复杂的心情全都消散。
那么，关于今年，我学会了去记录东西，记录日常，记录工作的项目，虽然总是会忘记，但是好歹想起一次，就记录一次，也算是把有道云笔记填充的挺多的，不过太多细碎，没有经过梳理，所以从来不发博客，毕竟谁也不想拿出太差的东西，被喷的狗血淋头不算啥，误人子弟才是致命！
公司的需要，以及我本身的定位，还有我最近的态度，导致我真的，大不如前！以前至少自动化构建使用gulp（虽然只使用简单的监听，丑化，合并等功能），编辑css使用sass；angular，react懂一点点，也使用ionic等配合着上面的两大框架，临摹着别人的代码，做出过自己的小项目（回头就扔掉了）。是啊，我从来没什么熟练度，使用jQuery，zepto又不熟练，想到什么就百度着用，兼容性做的也不好，而且九月十月歇停了两个月才再次出来找工作，公司的项目，使用bootstrap作为pc页面配置的UI框架，移动端没有让我动手去碰过，编辑代码，初创公司，前端却有些过多，又没有真的大牛领导，所以协同合作能力很差，什么都不使用，就是基础了手敲代码。。。我还是这么一个懈怠的人，理所当然，却又让人失望了，我如今真的啥都不会了。。。学习vue，也看了几眼就去看小说了，gulp，sass也捡不起来了（因为懒）。这样的我，真的是太糟糕了。。。
如果有人愿意看我BB抱怨了这么多（其实自身问题也不比外界因素小多少），那么下面我就把这一周的工作（总共没有干几个小时，汗！）稍微总结一下吧。首先，这周终于来公司一个多月，然我接触手机端webapp了，虽然只是添加一个功能按钮。。。
1.input设置字体，肯定font-size就是了，但是想要单独的给placeholder设置单独的字体呢？如下图：
我们可以看到，input的value的字号为估计要有32px吧，而placeholder是估计18px的（别问我怎么估计的，UI告诉我的-。-应该没有记错，懒得回头翻代码了），那么，如何实现给placeholder设置样式呢？
好吧，因为我开发的是微信公众号，所以使用的都是webkit内核，只做了这一种兼容；
不好意思这部分贴太多代码，毕竟我也是抄袭过来的，还是抄的博客园的大神的博客，
原贴链接：http://www.cnblogs.com/overstackcoder/p/5522637.html
input::-webkit-input-placeholder { /* WebKit browsers */ color:#999;font-size:16px; }
注意：1.input后面的冒号是两个，虽然我觉得这种::写法是css2的，css3本应该可以一个:就可以的啊，我测试了一下（但是，我不是在真机测试，而是使用chrome浏览器提供的手机模拟），是失败了，必须::，希望如果有大神真机测试（毕竟我懒。。。），然后打我脸。
2.两个小的东西，input点击出现亮边，设置一个属性{outline:0;}就是了。滚动时拒绝滚动条的出现，就设置div::-weblit-scrollbar{width:0;}（这里div指的是滚动外侧父元素）
html:
<div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
css:div {
width: 200px; height: 200px;
overflow: hidden;
/* overflow-y这个必须要有 */
overflow-y: auto;
overflow-x:hidden; } ul li { width: 100%; height:100px; border: 1px solid pink; }
/* 依旧::，依旧只做了webkit内核的兼容 */ div::-webkit-scrollerbar { width: 0; }
展示如上代码，只是为了告诉大家到底给哪个元素设置scrollbar。（博客园提供的代码编辑器好累啊。。。）
对了，还有，使用input[type=number]，我们会发现，选中input时，input框右侧会有上下小箭头，好烦，解决方式，
链接：http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
可能要FQ才能看到，所以我直接把代码粘过来了，代码如下：（只兼容了chrome（可能还有safari吧）和firefox，我也不知道为啥没人去管opera和ie。。。-。-）
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
3.大头，关于rem
估计大家肯定都知道相关的理论知识很多了，和px，em的区别，还有vh，vm等东西，那么我这次说的就是rem到底怎么用。
3.1 首先，根字体，指的是html的字体，不是body，谢谢！
3.2 具体使用方法，就是写一个函数并且自调用，代码如下
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = (clientWidth / 7.5) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
注释：7.5，是750px/100px 因为要设置clientWidth/fontSize == 750px/100px;
clientWdith：视窗宽度（应该包括手机屏幕所有的可视的范围，一般浏览器也都是全屏无边框嘛）
document.documentElement.style.fontSize：根字体，也就是<html>标签的字体大小
750px：UI我们公司提供的设计图的尺寸
100px：这就是我们设置的，在宽度750px的显示屏下，根字体大小是100px
(但是，恕在下直言，手机竖屏压根没有750px的宽度，所以我们设计的其实就是根据iphone6的375px宽度设计的根字体大小为50px而已，可以我表达不清，见谅)
3.3 最后一条了，现在时间2016.12.31/11:28:36，写完我就不检查了哈，要带我来上海玩的朋友去外滩转转呢。
这次我是在别人的代码的基础上添加一个功能，所以对方使用的根字体大小是10px，汗，手机上是没有问题的，但是模拟在chrome上就出现了问题，不对！和我计算出来的尺寸不一样！为什么？真的就想了一下午加一早上，看了几乎50章小说，终于想明白了，pc端浏览器有最小字号限制这件事我怎么就忘记了呢!果然，虽然我设计的是html的font-size为10px，但是chrome进行了限制，我的根字体大小其实是12px，所以才会出现那些误差，
chrome：设置--> 显示高级设置 --> 网络内容 --> 自定义字体 --> 滚到最下面，把最小字号调为100px。果然，ok！
但是手机端真的全都没有问题了吗？我一边纠结着，还不知道手机端该怎么进行测试，还好，我找到了一个人的测试，受益匪浅，就把链接贴出来吧，此人对大部分机型和浏览器都进行了测试，我是收获到了自己想要的东西，各位如果对手机端到底支持的最小字号是多少有怀疑，推荐去看一看！
链接地址：http://www.cnblogs.com/he-lian/p/4512276.html
我才发现，原来这依旧是我们博客园的大大写的博客，笑~
2016最后一个月，我鼓起勇气开始书写自己的博客，2016的最后一天，我继续用博客刷了一遍存在感，其实，我过的一点都不好，却又不能让别人知道，马上试用期结束了，公司的尿性，我也不清楚会不会踢了我，毕竟前端太多，没事，毕竟创业型公司，对我有知遇之恩，毕业后正儿八经靠本科毕业证（非科班）找打第一份工作，没什么，艰难只是暂时的，明天会更好，我也渐渐要摆脱懈怠啊。
ok！最后的最后，祝各位元旦快乐，无论怎样，2016即将过去，新的2017即将来临，而且还是我本命年，嘻嘻~一起奋斗吧！
（如果有大大们对我的内容进行了批判，毕竟很可能漏洞百出，明年再一一回复你们，浪去了~）
