• 在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。当然也可以设置成自己喜欢的颜色。
  -webkit-tap-highlight-color:transparent;/清除点击高亮效果/

• 通过css3的新属性box-sizing我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条。

  -webkit-box-sizing: border-box;/*webkit内核兼容性写法*/
  box-sizing: border-box;

• 在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等,我们需要添加下列样式。
  -webkit-appearance: none;/*在移动端清除浏览器默认样式*/

• 考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题。

  max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/
  min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

• nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下

  • E:first-of-type匹配同类型中的第一个元素E。
  • E:last-of-type匹配同类型中的最后一个元素E。
  • E:nth-of-type(n) 匹配同类型中的第n个元素E。

viewport 是用户网页的可视区域。如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话，viewport就相当于相框中的画,可能会比相框小,可能会比相框大,最好是一样大。该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的。
语法设置：

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

标签值：

• width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device"。
• initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
• minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
• maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
• height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
• user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

Emmet语法中，输入meta:vp,然后按tab键，会自动生成viewport的代码。