# 移动端开发

1
2
3
4
5
6
7
8
9
10
11
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮设置为透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面是的弹出菜单*/
img, a {
-webkit-touch-callout: none;
}

# 技术选型

移动端布局和 PC 端有所区别

# 单独制作移动端页面 (主流)

  • 流式布局 (百分比布局)
  • flex 弹性布局 (强烈推荐)
  • less+rem + 媒体查询布局
  • 混合布局

# 响应式页面兼容移动端 (其次)

  • 媒体查询
  • bootstarp

# 流式布局

  • 流式布局,就是百分比布局,也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充
  • 流式布局方式是移动 web 开发使用的比较常见的布局方式