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即将来临,而且还是我本命年,嘻嘻~一起奋斗吧!

  (如果有大大们对我的内容进行了批判,毕竟很可能漏洞百出,明年再一一回复你们,浪去了~)

  

 

  

赞 (0) 评论 分享 ()