移动端布局 - 技术解决方案

---

一、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