1.移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主  ，移动我们的端技CSS3中的盒子模型， padding 和 border 不会撑大盒子了

术解


术解

/*CSS3盒子模型*/

术解

box-sizing: border-box;

术解

/*传统盒子模型*/

术解

box-sizing: content-box;

术解

同时我们浏览器的决方私有前缀我们只需要考虑添加 webkit 即可


2.移动端公共样式

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css ：保护了有价值的默认值

Normalize.css ：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档


官网地址  ： http://necolas.github.io/normalize.css



3.移动端大量使用 CSS3盒子模型box-sizin


传统模式宽度计算 ：盒子的宽度 = CSS中设置的width + border + padding 

CSS3盒子模型 ：盒子的宽度=  CSS中设置的宽度width 里面包含了 border 和 padding 

也就是说，

我们可以放心使用 H5 标签和 CSS3 样式 。移动因此我们就考虑webkit兼容性问题 。端技