box-sizing：border-box（width+padding+border）；
box-sizing：content-box（width+padding+border+margin）；
倍图：用box-sizing：宽 高|百分比|cover|contain设置以适应盒子；
1、流式布局：
主体布局和原来电脑端一样，只是宽用百分比来做，可以缩放。
样式初始化：
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
案例详见京东移动版
2、flex布局：
给父盒子设定display：flex；然后子盒子设定flex：份数；设定盒子在主轴上的宽。设定弹性布局之后浮动、定位失效。
父元素常见属性：
flex-direction：设置主轴的方向（row、row-reverse、column、column-reverse）
justify-content：设置主轴上的子元素排列方式（flex-start、flex-end、center、space-around、space-between）
flex-wrap：设置子元素是否换行（wrap、nowrap）
align-content：设置侧轴上子元素的排列方式（多行，值同justify-content+stretch）
align-item：设置侧轴上子元素的排列方式（单行，flex-start、flex-end、center、stretch）
flex-flow：direction和wrap的符合属性
子元素常见属性：
flex：定义子元素项目分配份数
order：设置子元素顺序（数值越小越靠前）
align-self：控制子项目自己在侧轴上的排列方式（单个）
常用初始化样式：
body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
案例详见携程移动版
3、rem布局：
宽高等基于html字体大小，借助与媒体查询来适应不同尺寸屏幕下页面样式的变化
a、em：相对于父元素字体改变   rem：相对于html字体大小改变
b、媒体查询：@media mediatyep and|not|only（media feature）｛CSS-Code；｝
c、实现方法：
【less+rem+媒体查询】【lflexible.js+rem】
案例参考苏宁移动端

box-sizing：border-box（width+padding+border）；
box-sizing：content-box（width+padding+border+margin）；
倍图：用box-sizing：宽 高|百分比|cover|contain设置以适应盒子；
1、流式布局：
主体布局和原来电脑端一样，只是宽用百分比来做，可以缩放。
样式初始化：
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
案例详见京东移动版
2、flex布局：
给父盒子设定display：flex；然后子盒子设定flex：份数；设定盒子在主轴上的宽。设定弹性布局之后浮动、定位失效。
父元素常见属性：
flex-direction：设置主轴的方向（row、row-reverse、column、column-reverse）
justify-content：设置主轴上的子元素排列方式（flex-start、flex-end、center、space-around、space-between）
flex-wrap：设置子元素是否换行（wrap、nowrap）
align-content：设置侧轴上子元素的排列方式（多行，值同justify-content+stretch）
align-item：设置侧轴上子元素的排列方式（单行，flex-start、flex-end、center、stretch）
flex-flow：direction和wrap的符合属性
子元素常见属性：
flex：定义子元素项目分配份数
order：设置子元素顺序（数值越小越靠前）
align-self：控制子项目自己在侧轴上的排列方式（单个）
常用初始化样式：
body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
案例详见携程移动版
3、rem布局：
宽高等基于html字体大小，借助与媒体查询来适应不同尺寸屏幕下页面样式的变化
a、em：相对于父元素字体改变   rem：相对于html字体大小改变
b、媒体查询：@media mediatyep and|not|only（media feature）｛CSS-Code；｝
c、实现方法：
【less+rem+媒体查询】【lflexible.js+rem】
案例参考苏宁移动端