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即未來臨，並且仍是我本命年，嘻嘻~一塊兒奮鬥吧！

　　（若是有大大們對個人內容進行了批判，畢竟極可能漏洞百出，明年再一一回復大家，浪去了~）