一、CSS初始化
移动端CSS初始化推荐使用 normalize.css/
下载地址 : http://necolas.github.io/normalize.css/
二、CSS3盒子模型
- 传统模式宽度计算 : 盒子的宽度 = css中设置的width + border + padding
- CSS3盒子模型 : 盒子的宽度 = CSS中设置的widht, 里面包含了border和padding
CSS3中的盒子模型, 加边框不会撑大盒子
/* CSS3盒子模型 */
box-sizing: border-box;
三、特殊样式
/* css3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent完成透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img, a { -webkit-touch-callout: none; }
四、移动端技术选型
单独制作移动端页面
- 流式布局
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端
bottstrap