前端开发学习总结

2016-05学习笔记

1.eavl()函数可计算某个字符串，并执行其中的的 JavaScript 代码

当返回参数需要当成JS代码来执行的时候可以使用该函数。

2.纯数字在div层里无法自动换行

解决方案：在div层样式加入

word-wrap:break-word;
word-break:break-all;

3.arguments属性

$.preloadSound = function () {
    //arguments批量获取所有函数传递内容成数组对象
    for (var i = 0; i < arguments.length; i++) {
        $("<audio>").attr("src", arguments[i]);
    }
};
$.preloadSound(1,2,3,4,5,6)

4去掉a标签的虚线框

a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/

5当元素获得焦点的时候，焦点框为0

:focus{outline:0;}

6移动端自适应字体大小切换

!(function (doc, win) {
    var el = doc.documentElement;
    //resizeEvt = "orientationchange" in window ? "orientationchange" : "resize";

    function setSize() {
        var w = el.clientWidth;
        if (!w) return;
        w=w>480?480:w;
        w=w<320?320:w;
        el.style.fontSize = (100 * (w / 1080)).toFixed(3) + "px";
    }
    if (!doc.addEventListener) return;
    setSize();
    win.addEventListener("resize", setSize, false);
    win.addEventListener("pageshow", function(e) {
         if (e.persisted) {
            setSize();
         }
    }, false);
})(document, window);

css移动端字体代码

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

移动端预设透明度

.opa2 {
  opacity: .2;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 20);
  filter: alpha(opacity = 20);
  -moz-opacity: .2;
  -khtml-opacity: .2;
}
.opa3 {
  opacity: .3;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 30);
  filter: alpha(opacity = 30);
  -moz-opacity: .3;
  -khtml-opacity: .3;
}
.opa4 {
  opacity: .4;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 40);
  filter: alpha(opacity = 40);
  -moz-opacity: .4;
  -khtml-opacity: .4;
}
.opa5 {
  opacity: .5;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 50);
  filter: alpha(opacity = 50);
  -moz-opacity: .5;
  -khtml-opacity: .5;
}
.opa6 {
  opacity: .6;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 60);
  filter: alpha(opacity = 60);
  -moz-opacity: .6;
  -khtml-opacity: .6;
}
.opa7 {
  opacity: .7;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 70);
  filter: alpha(opacity = 70);
  -moz-opacity: .7;
  -khtml-opacity: .7;
}
.opa8 {
  opacity: .8;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 80);
  filter: alpha(opacity = 80);
  -moz-opacity: .8;
  -khtml-opacity: .8;
}

去除a/button/input标签被点击时产生的边框

a,button,textarea,select{
    -webkit-appearance:none;
    -webkit-tap-highlight-color:rgba(255,0,0,0); 
}
/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */

2016-06学习笔记