移动端总结

做三角形：

Width:0;height:0;border:5px solid;border-color:red  transparent  transparent  transparent;

注：border-color中，设置了颜色那个边框就是三角形的底边框

	outline和border的主要区别：
	1、border设置完会影响盒子模型的宽高，而outline不会
	2、border可以分别修改四个方向的值，outline只能统一设置一样的

 

给textarea设置resize: none;用户就无法手动改变文本框的大小啦。

例：让class为box的div中的p在div中以四列形式显示

.box {
		margin: 20px auto;
		padding: 15px;
		width: 850px;
		border: 1px dashed #11c900;
		border-radius: 10px;
		/*实现四列布局*/
		/*
		-webkit-columns: 200px 4;
		columns: 200px 4;
		*/
		-webkit-column-width: 200px;
		column-width: 200px;
		/*浏览器根据每一列的宽度自动安排列数*/
		-webkit-column-count: auto;
		column-count: auto;
		/*normal是默认值，浏览器自己通过计算设置，一般是1em，自己可以进行设置，设置完成后，如果column-count: auto，则浏览器会从新的计算列数*/
		-webkit-column-gap: 1.5em;
		column-gap: 1.5em;
		/*设置列和列之间的边框*/
		-webkit-column-rule: 1px dashed #ccc;
		column-rule: 1px dashed #ccc;
		}

 

H5中的表单元素

Input   type=“number” 优先打开数字键盘，除数字以外的字符输不进去

Input   type=“range” 跟调音量差不多的图标，横向的 

例：手动改变id是ran的值，让id是num里显示ran里拖动后的值

<form action="#">

    <input id="num" type="number" max="80" min="6" step="2"/>

    <input id="ran" type="range"  max="80" min="6" step="2" value="12"/>

</form>

var num=document.querySelector("#num");

    var ran=document.querySelector("#ran");

    ran.onchange=function(){

        num.value=this.value;

}

Input   type=“date”打开一个日历控件

Input   type=“time”时间  可以选择或输入多少时  多少分

Input   type=“week” 可选择哪一年的第多少周  

Input   type=“color”调出色板

这几个新增加的表单元素在pc端不兼容  只能用在移动端

H5中新增加的表单元素，不需要写正则验证

移动端中常用的事件操作：点击、长按、双击、上划、下滑、左滑、右滑、拖拽、缩放、旋转。。。

一个手指操作的：touch事件模型  touchstart、touchmove、touchend、touchcancel

多个手指操作的：gesture事件模型

按下移动的距离低于10px；我们默认是没有发生移动的，按下后750ms没有离开，也没有发生位移属于长按；

Onclick：

1）触发太敏感啦，碰到就触发了

2）onclick在移动端有300ms的延迟

3）当我们点击的时候，按钮的周围会出现默认的颜色背景框

移动端想实现点击事件，我们需要用touch事件模型来进行模拟

Zepto.js中提供了专门的touch事件库：单击、双击、长按、滑动、上划、下滑、左滑、右滑

 

不再考虑浏览器兼容性

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，so，在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性，webkit是本次开发重点。

当然，不同版本的Android是存在一些问题的，还有就是不同浏览器的版本也存在一些差别，IOS在这方面表现甚好。

所以在开发时我们只需使用Chrome进行调试即可，话说Chrome的开发者工具也是灰常不错的。

丰富的页面Meta

控制显示区域各种属性：

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

• width                      – viewport的宽度
• height                     – viewport的高度
• initial-scale          – 初始的缩放比例
• minimum-scale  – 允许用户缩放到的最小比例
• maximum-scale – 允许用户缩放到的最大比例
• user-scalable       – 用户是否可以手动缩放

IOS中Safari允许全屏浏览：

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式：

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码：

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

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

IOS中Safari设置保存到桌面图标：

这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

强大的CSS属性box-flex

之所以将这块作为大栏目来讲，是因为这个属性非常有用，和之前开发win8 app时的grid非常相似。

box-flex的作用是按百分比划分兄弟相同标签的width，也就是当ul里有个两个li时，每个li会自动划分ul的宽度，如果box-flex:1;那么此时，li的width就是50%

box-flex用法实例1：

<ul>      <li>11111</li>      <li>2222222</li>      <li>333333333</li></ul>

ul{display: -webkit-box;}    ul li{-webkit-box-flex: 1;}

box-flex用法实例2：

<div class="demo02">  <input placeholder="百分百宽度输入框" type="text"></div>

<style type="text/css"> .demo02{display: -webkit-box;} .demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}</style>

关闭Input键盘默认首字母大写：autocapitalize=”off”

于不同版本的Android 的内置浏览器内核版本不一样，因此webkit 的点击效果可能不同，有的版本的android 点击后会出现篮框等效果，因此可以加上：
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
来消除

弹性盒布局：

给父元素设置   display:-webkit-flex

给子元素设置   flex：num          num表示该子元素占父元素的比例   

不定宽高的水平垂直居中：

position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);

定宽高或不定宽高的子元素在固定宽高的容器中水平垂直居中：

box-pack：水平居中

box-align：垂直居中

给父元素设置如下样式：

display:-moz-box;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;

flexbox版不定宽高的水平垂直居中

Justify-content:center; //子元素水平居中

align-items:center;-webkit-align-items:center;//子元素垂直居中

Display:-webkit-flex;

弹性盒布局，子元素默认水平排列，

flex-direction:row是默认值,水平排列。然后再设置display:-webkit-flex

如需水平倒序排列，则设置flex-direction:row-reverse;display:-webkit-flex

如需子元素垂直排列，则需设置flex-direction:column;display:-webkit-flex

如需子元素垂直倒序排列，则需设置flex-direction:column-reverse;display:-webkit-flex

 

-webkit-flex-wrap:nowrap;//默认值，禁止换行

例：给父元素设置400px的宽，子元素累加超过400px也不会换行

-webkit-flex-wrap:nowrap;display:-webkit-flex;Width:400px;

 

-webkit-flex-wrap:wrap;//换行

例：给父元素设置400px的宽，子元素累加超过400px会换行

-webkit-flex-wrap:wrap;display:-webkit-flex;Width:400px;

 

Justify-content:flex-start;//默认值，效果跟float：left一样，子元素靠左排列

Display:-webkit-flex;

 

Justify-content:flex-end;//效果跟float：right一样，子元素靠右排列

Display:-webkit-flex;

Justify-content:center//第三代水平居中方案

Display:-webkit-flex;

 

 

justify-content:space-between;//子元素靠两边对齐

Display:-webkit-flex;

 

Justify-content:space-around；//按间距划分，子元素两边的间距相等

Display:-webkit-flex;

兼容：

安卓4.4以上和ios可以使用最新的flex布局

安卓4.4以下需要使用旧版的flex布局。

新flex布局：

Display:-webkit-flex;

-webkit-flex:1;

Justify-content:center;

Align-items:center;

旧flexbox布局

Display:-webkit-flex-box;

-webkit-flex-box:1;

Box-pack:center;

Box-pack:center;//水平方向排版

Box-align:center;//垂直方向排版

 

兼容：flex:1;-webkit-flex:1;-webkit-box-flex:1;

display:-webkit-box;display:-webkit-flex;display:flex;display:-webkit-box-flex;

 

 

rem就是给根标签html设置文字大小后（不设置的话，大部分浏览器默认为16px）,其他标签设置rem都是html大小的倍数。

如：html{font-size:10px;     //设置html标签字体大小为10px}

       h1{font-size:2rem;     //10px*2=20px;也就是h1标签的字体大小为20px；}

• html{
• font-size:62.5%; /* 10÷16=62.5% */
• }
• body{
• font-size:12px;
• font-size:1.2rem ; /* 12÷10=1.2 */
• }
• p{
• font-size:14px;
• font-size:1.4rem;
• }

 

Html  body高度不能自适应  使用属性 height:auto;

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;