主流移动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;
}
有固定宽度限制的百分比布局
- 最小宽度
- 最大宽度
网友评论