2016最后一天+本周一点内容总结

时间 2019-12-08

标签最后一天本周一点 1点内容总结繁體版

原文原文链接

　　转眼已经到了2016年最后一天，时间飞逝，想要感慨，却发现千言万语都说不出来，生活方面一团糟，工做不够稳定，技术依旧有待提升。。。css

　　最后一天，本想敷衍了事，而后出去转转吧，虽然口袋里没有几个钱，仍是下午去外滩走走看看吧。html

　　想要写一篇技术博客，可是真的技术原本就不怎么好，并且这一周的项目，boss不在，经理请假，咱们一群年轻人，每天在公司蹭时间，等放假，哎，真的很差，很差。前端

　　想要写一写心情，毕竟你们写的都有2016年的一年反思和总结，或好或坏，或喜或悲，我也想说一说，可是打开博客编辑的一瞬间，思绪全无，复杂的心情全都消散。vue

　　那么，关于今年，我学会了去记录东西，记录平常，记录工做的项目，虽然老是会忘记，可是好歹想起一次，就记录一次，也算是把有道云笔记填充的挺多的，不过太多细碎，没有通过梳理，因此历来不发博客，毕竟谁也不想拿出太差的东西，被喷的狗血淋头不算啥，误人子弟才是致命！html5

　　公司的须要，以及我自己的定位，还有我最近的态度，致使我真的，大不如前！之前至少自动化构建使用gulp（虽然只使用简单的监听，丑化，合并等功能），编辑css使用sass；angular，react懂一点点，也使用ionic等配合着上面的两大框架，临摹着别人的代码，作出过本身的小项目（回头就扔掉了）。是啊，我历来没什么熟练度，使用jQuery，zepto又不熟练，想到什么就百度着用，兼容性作的也很差，并且九月十月歇停了两个月才再次出来找工做，公司的项目，使用bootstrap做为pc页面配置的UI框架，移动端没有让我动手去碰过，编辑代码，初创公司，前端却有些过多，又没有真的大牛领导，因此协同合做能力不好，什么都不使用，就是基础了手敲代码。。。我仍是这么一个懈怠的人，理所固然，却又让人失望了，我现在真的啥都不会了。。。学习vue，也看了几眼就去看小说了，gulp，sass也捡不起来了（由于懒）。这样的我，真的是太糟糕了。。。react

　　若是有人愿意看我BB抱怨了这么多（其实自身问题也不比外界因素小多少），那么下面我就把这一周的工做（总共没有干几个小时，汗！）稍微总结一下吧。首先，这周终于来公司一个多月，然我接触手机端webapp了，虽然只是添加一个功能按钮。。。css3

　　1.input设置字体，确定font-size就是了，可是想要单独的给placeholder设置单独的字体呢？以下图：web

咱们能够看到，input的value的字号为估计要有32px吧，而placeholder是估计18px的（别问我怎么估计的，UI告诉个人-。-应该没有记错，懒得回头翻代码了），那么，如何实现给placeholder设置样式呢？chrome

　　好吧，由于我开发的是微信公众号，因此使用的都是webkit内核，只作了这一种兼容；gulp

　　很差意思这部分贴太多代码，毕竟我也是抄袭过来的，仍是抄的博客园的大神的博客，

　　原贴连接：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即未来临，并且仍是我本命年，嘻嘻~一块儿奋斗吧！

　　（若是有大大们对个人内容进行了批判，毕竟极可能漏洞百出，明年再一一回复大家，浪去了~）