移动端常用标签

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

移动端技术解决方案

CSS初始化

http://necolas.github.io/normalize.css/

CSS3盒模型

• 新增box-sizing: boder-box;属性

  • 作用：将border和padding算在宽度里，不会撑大盒子

    特殊样式

• 清除点击高亮

  • -webkit-tap-highlight-color: transparent;
• 移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
  • -webkit-appearance: none;

• 禁用长安页面时的弹出菜单

  • -webkit-touch-callout: none;

    移动端常见布局

    流式布局（百分比布局）

• 概述：通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

  flex布局（弹性布局）

• 注意：为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效

• 通过给父元素添加flex属性，来控制子盒子的位置和排列方式

  rem适配布局

  rem单位

• 概述：rem是一个相对单位，类似于em，em时父元素字体大小

• 不同：rem的基准是相对于html元素的字体大小

• 根元素（html）设置font-size: 12px;非根元素设置width: 2rem; 则换成px表示24px

  媒体查询

• @media 可以针对不同的屏幕尺寸设置不同的样式 ```html

1. @media 开头
2. mediatype 媒体类型
3. 关键字：and not only
4. media feature 媒体特性，必须有小括号包含 ```

• mediatype值：all(所有设备)、print(打印机和打印预览)、screen(电脑屏幕、平板、手机)
• 关键字：and(连接多个媒体特性)、not(排除某个媒体类型)、only(指定某个特定的媒体类型)

• media feature(媒体特性)值：width(定义可见区域宽度)、min-width(定义可见区域最小宽度)、max-width(定义可见区域最大宽度)

  rem值

• 页面元素的rem值 = 页面元素在750px下的px值 / html中的文字大小