手机端WEB开发与拓展

        

手机端

视口

布局视口，视觉视口，理想视口

理想视口需要给移动端页面添加meta视口标签

<meta  name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

CSS初始化

移动端css初始化推荐使用normalize.css/

官网地址：http：//necolas.github.io/normalize.css/

移动端盒子模型内外边距和边框不会撑大盒子

flex布局

flex是flexible box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 属性：display：flex

• 当给父盒子设置flex布局后，子元素的float，clear和vertical-align将失效

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，成为flex容器，它的所有子元素自动成为容器成员，成为flex项目

父项属性

• flex-direction：设置主轴的方向 主轴与侧轴：默认主轴就是x轴方向，默认侧轴就是y轴方向

  属性值	说明
  row	默认值，从左到右
  row-re