[TOC] ###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學習筆記