移動端頁面筆記

HTML

1.meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

   width -- viewport的寬度

   initial-scale -- 初始的縮放比例

   maximum-scale --容許用戶縮放到的最大比例

   user-scalable -- 用戶是否能夠手動縮放

2.底部的footer標籤部分是固定定位。（我寫的是 footer{position:fixed;bottom:0;width:6.4em;}(感受又是一個笨辦法)）（儘可能不用，當手機輸入法彈出來的時候會有bug）

CSS

1.使用圖片時，會發現圖片下老是有大概4px的空白，（緣由聽說圖片是inline，觸發baseline什麼的。。。）經常使用解決方法有

img{display:block}；

img{vertical-align:top}也可取其餘幾個值，視狀況而定。

2.em和rem

a.任意瀏覽器的默認字體高都是16px

b.em會繼承父級元素的字體大小。 rem相對的是根元素的字體大小

c.除了IE8及更早版本外，全部瀏覽器均已支持rem。

d.一個px,em,rem單位轉換工具

地址：http://pxtoem.com/

3.今天要寫一個ul下li橫向排列且不換行的效果。顯然不能用浮動，能夠將

li{display:inline-block;vertical-align:top;}/*若是是IE6,7，display:inline-block要變成display:inline;zoom:1;*/

ul{word-white:nowrap;}

下面是關於display:inline-block特性的連接：http://ued.taobao.org/blog/2012/08/inline-block/

4.用的比較笨的圖片自適應方法，在圖片外面加了一個標籤，固定大小，圖片100%；（太笨了）；（img:box-sizing:border-box），誒，同事說是這樣寫的。

5.footer部分爲了需求，可使用display:flex;flex-grow:1;(彈性佈局)

flex介紹

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

javascript

1.自適應字體大小（下面這段用em時，若用rem，能夠用parentNode去找html標籤）

function fontAuto(){
    var winWidth=document.documentElement.clientWidth;
    if(winWidth>=640){
        document.body.style.fontSize="625%";
    }
    else{
        document.body.style.fontSize=winWidth/640*625+"%";
    }
}
fontAuto();
window.onresize=fontAuto;

2.上午寫了audio的音頻播放部分，包括進度條控制，點擊播放和暫停，時間顯示。不過還有一點小bug，具體能夠參考

http://www.open-open.com/lib/view/open1407401112973.html

3.下午要寫左滑出現刪除按鈕的效果，思路可參考

http://blog.csdn.net/smile_watermelon/article/details/46380921

（我是按上面的思路寫的，可是師傅說不是很友好，繼續找例子）

        1.剛開始總是顯示$(...).animate is not a function; 緣由：官方給的是最精簡版的，若是要用這個方法，需載入fx.js部分

        2.字符串的拼接是很差出現換行的，可是爲了好看，能夠用「+」拼接出來；

        3.今天，PC端搞定了，但是用手機測的時候，掛！慘！ 了！無數的bug啊啊啊；接下來改改手機端的一些bug

1. 在點擊播放和暫停按鈕的時候，出現了一個黑影：是佈局出錯；

2. 列表中新添加的項目效果沒法實現：不能用事件綁定，須要事件代理；

3. 上下沒法滑動：阻止了默認事件，刪掉就能夠

4. 列表項刪除的時候想現將高度變爲0，而後在將節點刪除，但是這裏加了remove()之後就直接刪除了，沒有執行動畫：動畫是異步的，動畫的本質是開定時器，定時執行對dom的操做，這個時候用animate的回調更加合適

5. 用IPhone調試的暫時，雖然設置了取消默認事件，可是仍是會觸發，而後我把事件從 tap 改爲了 touchstart就能夠了，暫時不知道緣由。(由於a連接中href的javascript拼錯了，高級錯誤。。。，要麼寫#號也能夠，就是別寫錯)

6. 移動端點擊播放和暫停的時候須要點擊屢次才能觸發，PC端是OK的。最後的解決方式是事件名從tap改爲了touchend（緣由暫時不明）；

   至此，一個簡陋的頁面就出來了。即便low的不行，可是還有收穫頗豐，繼續加油咯。