寫css、js的時候就得想到用戶的交互問題，不是實現(xiàn)了或是能用了就夠了。因為有的時候，寫完了用的時候發(fā)現(xiàn)好像總覺得哪里有問題又說不出來。不過沒關(guān)系，文博看一眼就知道問題出在哪里。
還有的時候吧，以為自己寫得很好了，可是在文博看來用DDZ的話說“都是渣渣”，但是文博不會說出來的，文博永遠都是特有耐心、脾氣特好地建議性指出哪里哪里可以改進的。
必須給文博發(fā)一枚大大的好人卡。
1.Hn的使用
標題性質(zhì)的logo，最好用<h1></h1>包起來，而不是div。
有了
h1之后，下面的這種大標題就可以用<h2></h2>包起來，而不是胡亂寫一個h幾。
2. a標簽的點擊區(qū)域
手機上，有些內(nèi)容的點擊區(qū)域越大越好，比如導(dǎo)航欄中。
開始的時候太愚昧，導(dǎo)航tab之間的距離都是用外層li來設(shè)置的，有效點擊區(qū)域就那么一小點兒，怪不得有時候點歪一點兒就沒反應(yīng)。
要知道影響用戶跳轉(zhuǎn)的標簽時
a而不是li，所以最好把a鋪滿在整個li當中，而只需要給a加一個display: block、然后 padding加在a上就可以做到了。
3.錨點定位
還是上面的導(dǎo)航欄。因為錨點定位的時候需要平滑定位，想當然以為href=“#”只能是一下子跳轉(zhuǎn)過去，加不了效果，所以一開始我給每個a加了id，通過document.getElementById取獲取然后添加事件。
然鵝~幼稚！文博說，通過document.querySelectorAll也可以獲取啊，獲取到之后把默認的事件取消就OK了啊...什么？document.querySelectorAll不是只能獲取class啊！瞬間就覺得自己弱爆了！
var navs = ['index', 'research', 'tech', 'news', 'contact'];
for(var i=0; i<navs.length; i++){
(function(item){
var itemNode = document.querySelectorAll("[href='#" + item + "']")[0];
itemNode.addEventListener('touchstart',function (event) {
event.preventDefault();
self._closeNav();
self._scroller(document.getElementById(item), 300)
},false);
})(navs[i]);
}
4.偽元素背景圖 + 縮小至0.5倍 + 水平居中
其實用偽元素這件事情我也是沒少用的，但這里有個小坑，填完之后就忘記可以用偽元素，而不是單獨加一個i或是span去放背景圖了...
坑是：因為圖片我都切成了2倍的，然后又拼成了sprite.png，所以把這個sprite.png作為每個外層div的背景圖，光靠去設(shè)置每一個偏移量是不夠的，還需要縮小到原來的0.5倍，所以需要添加一個元素，使這個元素原本就是2倍的大小，配合每一個背景，最后用一個translate和scale(0.5)去調(diào)整位置和大小。
這里面需要注意一下水平居中的方式：
left: 50%; -wekbit-transform(translateX(-50%) scale(0.5))，用這個是最靠譜的。因為我原本用了left: 0; right: 0; margin: auto這種方式，但left:0本身是個坑：因為如果圖片區(qū)域的寬度x2超過了容器區(qū)域，那么縮小至0.5的時候，位置就會是偏的，所以盡可能的不要用left:0去限制元素的位置。還有，translate要寫在scale的前面！！
5.列表從隱藏到顯示的動畫效果
從前，讓折疊起來的元素從display:none到block出來，我只能想到height這個屬性：把height從0到某一個固定值，加transition效果。但如果height不固定，就懵逼了。然而文博告訴我，還可以用max-height，只需要知道每個區(qū)域可能的最大高度，依然可以展示“從被壓扁到被展開”的效果。意不意外，驚不驚喜？反正我是挺意外，挺驚喜的。。。
所以在點擊查看更多的時候，給每個待顯示的區(qū)域添加.show樣式，就OK了。
6.點擊跳轉(zhuǎn)的hover和active效果
想要讓移動端的某一區(qū)域?qū)崿F(xiàn)這樣的效果，首先還是需要將a放大到最大（至整個設(shè)計師要求顯示點擊效果的區(qū)域），這樣的話瀏覽器原本對a的hover和active效果是可以被帶到手機上的，所以，不要求對效果做統(tǒng)一處理的話，以上就能達到。但如果讓所有手機上達到統(tǒng)一的UI效果，就需要下面的這一坨代碼，清除并重置：
.news-list a, .news-list a:hover, .news-list a:active, .news-list a:-webkit-any-link{
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline:none;
}
.news-list a:hover, .news-list a:active{
background-color: #f5f5f5;
}
7.導(dǎo)航欄的收起和展開效果
對于這種收起和展開，我原本天真地覺得用上animate.css的slideInRight和slideOutRight就已經(jīng)很滿足了，但是文博告訴我，用不著那么多代碼的，用classList的toggle，什么鬼？！
classList的toggle這個東西，說白了就是“沒有就加上，有就去掉”。而導(dǎo)航欄的隱藏和展示的效果，無非也就是控制它的translateX，那所以單獨寫一個open的狀態(tài)讓它水平移動出來就可以了。
_openNav : function () {
this.navBar.classList.toggle("closed");
this.mask.style.display = 'block';
},
_closeNav : function () {
this.navBar.classList.toggle("closed");
this.mask.style.display = 'none';
},
8.addClass和removeClass的封裝可以去掉了
沒用zepto或jq，所以js都是原生寫的，之前覺得addClass和removeClass封裝一下用著方便，但一般情況下classList的add和remove就足夠了。
從caniuse上能看出來非一般的情況：
- SVG和MathML上使用classList，不支持；
- toggle的第二個參數(shù)不支持；
-
add和remove的多參數(shù)傳入不支持
所以當我們只對元素add或是remove一個特定class的時候，用classList足夠了
9.id的名稱
個別瀏覽器會有攔截的功能，而id="banner"這個wrapper里面的img請求就被攔住了。若不是文博告訴我，我是完完全全不知道的。所以對于類似于"banner"這種名稱，還是需要查一下，能不用就不用了。
n*.修改nginx配置，實現(xiàn)PC、mobile的不同跳轉(zhuǎn)
server的location層級下，在mobile的if判斷中，重寫新的跳轉(zhuǎn)路徑，覆蓋原有的PC端路徑。
server
location
#默認PC端訪問內(nèi)容
root /home/aDoc/bSys/[ai.#/](http://ai.#/);
#如果是手機移動端訪問內(nèi)容
if ( $http_user_agent ~ "(Android)|(iPhone)|(webOS)|(iPod)|(iPad)" ){
root /home/aDoc/bSys/[ai.#/mobile](http://ai.#/mobile);
}
