移动端

主流移动web站点

• 淘宝触屏版
• 京东商城手机版

移动端浏览器

• 基于webkit内核：QQ、百度、UC

适配问题

• 百分比自适应布局（流式布局）
• viewport

viewport

• 移动端用来承载网页的区域
• 只有移动端才识别
• 有默认宽度
• 默认会进行缩放

PC页面在手机缩放原因

base.css

* {
    // 清除移动端默认的，点击高亮效果
    -webkit-tap-highlight-color:transparent
    -webkit-box-sizing:border-box;
    -box-sizing:border-box;
}

input {
     border:none;
     outline:none;
     // 清除移动端默认的表单样式
     -webkit-appearance:none;
}

有固定宽度限制的百分比布局

• 最小宽度
• 最大宽度