移动端页面笔记

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的不行，但是还有收获颇丰，继续加油咯。