移动端页面笔记

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