J.chong

<h2>meta篇</h2>
<h3>1.视窗宽度</h3>
<style>
.codex{padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;}
</style>

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

其中 width=device-width 是设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是640px的宽度（常见于微信）；

initial-scale=1.0 ：设置缩放比例为1.0；

minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例；

user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为 yes 。

提示：刚刚那个是带全部参数的，一般常用的，有 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。

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

<h3>2.自动识别格式</h3>

<meta name="format-detection" content="telephone=no"/>

content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

<h2>CSS篇</h2>

content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

3.完整模板

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
CSS篇

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

html, body {
    -webkit-user-select: none; /*禁止选中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默认的表单样式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修改webkit中input的planceholder样式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隐藏Android的语音输入按钮*/
}

<h2>Flex基础篇</h2>

这里假设flex容器为 .box ，项目为.item 。

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}

/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}
``
<h3>2.容器样式</h3>

.box{

flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/

flex-wrap: nowrap | wrap | wrap-reverse;
/*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

flex-flow: <flex-direction> || <flex-wrap>;
/*主轴方向和换行简写*/

justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

align-items: flex-start | flex-end | center | baseline | stretch;
 /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/

}

<h3>3.项目样式</h3>

.item{

order: <integer>;
/*排序：数值越小，越排前，默认为0*/

flex-grow: <number>; /* default 0 */
/*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

flex-shrink: <number>; /* default 1 */
/*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

flex-basis: <length> | auto; /* default auto */
/*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

}

<h2>小技巧篇</h2>
<h3>1.自定义苹果图标</h3>
<p>在网站文件根目录放一个<span class='codex'> apple-touch-icon.png </span>文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。</p>
<h3>2.自定义favicon：</h3>

<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">

<h3>3.定义浏览器点击行为：</h3>

打电话给:020-10086
发短信给: 10086
发送邮件: me@22278.club

<h3>4.定义上传文件类型和格式</h3>

<input type=file accept="image/*">

<p>上面的文件上传框中，<span class='codex'> accept</span> 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成<span class='codex'>  image/png</span> 则可以限制图片类型为png；参数如果为<span class='codex'>   video/*</span> 则是选择视频的意思；accept 还可以设置多个文件格式，语法为<span class='codex'>  accept="image/gif, image/jpeg"</span> ；</p>
<h3>5.使用box-shadow改变(挡住)表单自动填充后的黄色</h3>

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{

box-shadow:inset 0 0 0 1000px #fff;

}

<h3>6.用CSS实现省略号文字截断</h3>

white-space: nowrap;
text-overflow: ellipsis;

感谢来源：http://www.ccwebsite.com/development-of-resource-integration-in-mobile-terminal/

函數：每一個變量都有對應的值稱之為函數

Math.pow(a,b) 表示a^b</sup

Math.sqrt(a)，表示a的開方，無法開多次方

a²+b²=c²

iMac底部菜單

See the Pen PPENEj by elmok (@elmok) on CodePen.

//角度转弧度，30度角转弧度，30*π/180
Math.sin(30 * Math.PI/180)

//上下比，角度对应π,弧度对应180

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var r = 100;
    var x = 700;
    var y = 300;
    var num = 0;
    setInterval(function(){
        num++
        //Math.sin( num*Math.PI/180 ) = a/r;
        //Math.cos( num*Math.PI/180 ) = b/r;
        
        var a = Math.sin( num*Math.PI/180 ) * r; //顺时针时，距离中心点的top值越来越远
        var b = Math.cos( num*Math.PI/180 ) * r; //顺时针时，距离中心点的left值越来越近；

        oDiv.style.left = x + b + 'px';
        oDiv.style.top = y + a + 'px';
        
        var oBox = document.createElement('div');
        oBox.className = 'box';
        document.body.appendChild( oBox );
        
        oBox.style.left = oDiv.offsetLeft + 'px';
        oBox.style.top = oDiv.offsetTop + 'px';
    },300);
};

#div1{ width:20px; height:20px; background:red; position:absolute; left:800px; top:300px;}
.box{ border:1px #000 solid; position:absolute;}

围绕y轴，在x轴平面上做运动，并且有z轴半径r;所以top值不变，改变的是left值与宽高，形成视觉差，近大远小运动

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var r = 100;
    var x = 700;
    var y = 300;
    var num = 0;
    setInterval(function(){
        num++
        //Math.sin( num*Math.PI/180 ) = a/r;
        //Math.cos( num*Math.PI/180 ) = b/r;

        //围绕y轴，在x轴平面上做运动，并且有z轴半径r;所以top值不变，改变的是left值与宽高，形成视觉差，近大远小运动
        
        var a = Math.sin( num*Math.PI/180 ) * r;
        var b = Math.cos( num*Math.PI/180 ) * r;

        oDiv.style.left = x + b + 'px';
        //oDiv.style.top = y + a + 'px';
        
        oDiv.style.width = a/100*30 + 50 + 'px'; //a最大100,起点50,注意理解
        oDiv.style.height = a/100*30 + 50 + 'px';

    },8);
};

圆心随鼠标移动方向移动；

var box = document.querySelector('.box')
var ege = document.querySelector('.ege')
var r = 50;
var L = 400
var T = 400
/*     -
     *     \
           \
    - ------------  +
           \
           \
    *      +
    * */
document.onmousemove = function (e) {
  var e = e || event;
  var x = e.clientX;
  var y = e.clientY;
  var a = Math.abs(x - (L + ege.parentNode.offsetLeft)) //为算角度
  var b = Math.abs(y - (T + ege.parentNode.offsetTop)) //大角与小角 角度一样
  var changeX = 0;
  var changeY = 0;
  if (x > L + ege.parentNode.offsetLeft && y < T + ege.parentNode.offsetTop) {
    changeX = Math.sin(Math.atan(b / a)) * r
    changeY = Math.cos(Math.atan(b / a)) * - r
  } 
  else if (x > L + ege.parentNode.offsetLeft && y > T + ege.parentNode.offsetTop) {
    changeX = Math.sin(Math.atan(b / a)) * r
    changeY = Math.cos(Math.atan(b / a)) * r
  } 
  else if (x < L + ege.parentNode.offsetLeft && y > T + ege.parentNode.offsetTop) {
    changeX = Math.sin(Math.atan(b / a)) * - r
    changeY = Math.cos(Math.atan(b / a)) * r
  } 
  else if (x < L + ege.parentNode.offsetLeft && y < T + ege.parentNode.offsetTop) {
    changeX = Math.sin(Math.atan(b / a)) * - r
    changeY = Math.cos(Math.atan(b / a)) * - r
  }
  ege.style.left = changeX + 'px'
  ege.style.top = changeY + 'px'
}

使用Math.atan2(y,x)，以原点为基础，任意一点到原点x轴的夹角；值范围为-PI - PI,换角度即：-180 - 180

一图了然，所以改写为

var ev = ev || window.event;
change(oDiv2, ev.clientX, ev.clientY, L2, T2);
change(oDiv3, ev.clientX, ev.clientY, L3, T3);
function change(obj, x, y, l, t) {
  var changeX = 0;
  var changeY = 0;

  var a = x - (obj.offsetLeft + obj.parentNode.offsetLeft)    //方向 右+ 左- 上 + 下-
  var b = - (y - (obj.offsetTop + obj.parentNode.offsetTop))

  var ifm = Math.atan2(b, a) * 180 / Math.PI

  if (0 < ifm < 90) {
    changeX = Math.sin(Math.atan2(b, a)) * r
    changeY = Math.cos(Math.atan2(b, a)) * r
  } 
  else if (90 < ifm < 180) {
    changeX = Math.sin(Math.atan2(b, - a)) * r
    changeY = Math.cos(Math.atan2(b, - a)) * r
  } 
  else if (0 > ifm > - 90) {
    changeX = Math.sin(Math.atan2( - b, a)) * r
    changeY = Math.cos(Math.atan2( - b, a)) * r
  } 
  else if ( - 90 > ifm > - 180) {
    changeX = Math.sin(Math.atan2( - b, - a)) * r
    changeY = Math.cos(Math.atan2( - b, - a)) * r
  }

  obj.style.left = l + changeX + 'px';
  obj.style.top = t + changeY + 'px';
}

table{border-collapse: collapse;width:95%}
table td{border:1px solid #ddd;padding:5px 10px}
table th{border:1px solid #ddd;padding:5px 10px}

</style>

Math 对象属性

Math 对象方法