前端移动端布局的俩种方式（单独制作移动端页面、响应式页面布局）

移动端

移动端布局有俩种方式

1.单独制作移动端页面

流式布局（百分比布局）
flex弹性布局
less+rem+媒体查询布局
混合布局

2.响应式页面布局

媒体查询
bootstrap

body初始化

jsx 复制代码

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    color: black;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

meta视口

移动端特殊样式

jsx 复制代码

-webkit-tap-highlight-color:transparent;//高亮颜色设置为透明
-webkit-appearance:none;//ios加上本属性自定义button样式
-webkit-touch-callout:none;//禁用长按页面弹出菜单

流式布局

宽度使用百分比使盒子适应父盒子大小
jsx 复制代码
```
width:100%;
max-width:980px;//最大放大到980px
min-width:320px;
```
flex布局

常见父项属性
jsx 复制代码
```
display:flex;
```
常见子属性
jsx 复制代码
```
flex:1;
flex:20%;//当超过五个子盒子可给父盒子flex-wrap换行
```
- flex-direction主轴方向
  
  子元素根据主轴排列，设置主轴后剩下的即为侧轴
  
  row-reverse盒子顺序54321
- justify-content主轴排列
  
  使用前确定主轴方向
  
  flex-end盒子顺序12345
- flex-wrap子元素换行
  jsx 复制代码
```
flex-wrap:wrap;//父盒子装不下子元素时自动换行
```
- align-items，align-content侧轴排列
  
  align-items单行下设置
  
  align-content侧轴felx-wrap换行后可设置，单行下无效
- flex-flow复合属性
  jsx 复制代码
```
flex-flow:row,wrap;//主轴方向及换行
```
- align-self单个子盒子侧轴排列
  
  控制单个盒子在侧轴上的排列方式
  jsx 复制代码
```
align-self:flex-end;
```
- order盒子索引号改变
  
  第一子盒子默认索引号为0，设置order为-1即可让该盒子成为第一个子盒子
less+rem+媒体查询布局
- rem
  
  设置html的页面文字大小，再通过子元素用rem控制
  
  em相对于父元素字体大小，1em为父盒子字体的px
- 媒体查询
  jsx 复制代码
```
@media screen and(min-width:540px) and(max-width:800px){

}
```
  查询类型
  
  关键字
  
  媒体特性
- less
  jsx 复制代码
```
@color:pink;
body{
	background-color:@color;
}
```
  变量命名规范：必须有@前缀，不包含特殊字符，不以数字开头，大小写敏感
  
  easy less插件自动编译新css文件
  - less嵌套
    
    less嵌套子元素样式直接写入父元素里
    
    嵌套a:hover
  - less运算
    
    运算符左右以空格隔开
    
    俩数运算单位不同以第一位单位为准，只有一个单位则以该单位为准
另一种适配方式：flexible.js+rem

响应式

布局容器划分大小

jsx 复制代码

.container {
            height: 100px;
            margin: 0 auto;
        }
        
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }
        
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }

bootstrap
- container类
  
  bootstrap媒体查询已经划分好了上述容器，名字叫做.container
- 栅格系统
  
  栅格系统将页面划分成12等份，行（row），列（column）
  
  例如：行（row）盒子内，每个盒子占三份，四个盒子共十二份
  
  如果占的份数<12则留有空白,份数>12则换行
  
  列嵌套最好row套row，可以自动消除父亲的padding，而且高度自动和父亲一样高
  
  列偏移：
  jsx 复制代码
```
class="col-md-offset-4"4代表偏移的份数
```
  列排序：
  jsx 复制代码
```
class="col-md-push-4"
class="col-md-pull-4"
```
  响应式工具：
  
  与之相反的有visible-xs等等