1. 使用 rem 作为单位

给手机这是 100px 的字体大小, 对于320px 的手机匹配是100px, 其他手机都是按比例分配, 因此设计稿上多少像素的话, rem = 设计稿像素/100

  1. 禁用 a, button, input, opigroup, select, textare 等标签背景变暗

在移动端使用 a 标签作为按钮或文字链接的时候, 点击按钮会出现一个暗色背景, 需要在 css 中加入

a, button, input, textarea, optgroud, select{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
`</pre>

  1. meta 基础知识

    页面窗口自动调整到设别宽度, 并禁止用户缩放页面

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

    忽略页面中的数字识别为手机号

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

    忽略 Android 平台对邮箱地址的识别

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

    当网站添加到主屏时可隐藏地址栏, 仅针对 ios 的 safari

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

  2. 移动端定义字体

    `body{
  font-family:"Helvetica Neue", Helvetica, sans-serif;
}
`

  3. 设置拨打电话

    `<a href="tel:1242432423">1242432423</a>
`

  4. 设置发送短信

    `<a href="sms:123124325434">123124325434</a>
`

  5. 设置发送邮箱

    `<a href="mailto:[email protected]">发送邮件</a>

8, calc 语法, 兼容 IE9+, FF4.0, Chrome19+, Safari6+