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

移动端

移动端布局有俩种方式

1.单独制作移动端页面

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

2.响应式页面布局

• 媒体查询
• bootstrap

body初始化

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

• meta视口

  

• 移动端特殊样式

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

• 流式布局

  宽度使用百分比使盒子适应父盒子大小

  width:100%;
  max-width:980px;//最大放大到980px
  min-width:320px;
  

• flex布局

  常见父项属性

  display:flex;
  

  常见子属性

  flex:1;
  flex:20%;//当超过五个子盒子可给父盒子flex-wrap换行
  

  

  • flex-direction主轴方向

    子元素根据主轴排列，设置主轴后剩下的即为侧轴

    row-reverse盒子顺序54321

    

  • justify-content主轴排列

    使用前确定主轴方向

    

    flex-end盒子顺序12345

  • flex-wrap子元素换行

    flex-wrap:wrap;//父盒子装不下子元素时自动换行
    

  • align-items，align-content侧轴排列

    align-items单行下设置

    

    align-content侧轴felx-wrap换行后可设置，单行下无效

    

  • flex-flow复合属性

    flex-flow:row,wrap;//主轴方向及换行
    

  • align-self单个子盒子侧轴排列

    控制单个盒子在侧轴上的排列方式

    align-self:flex-end;
    

  • order盒子索引号改变

    第一子盒子默认索引号为0，设置order为-1即可让该盒子成为第一个子盒子

• less+rem+媒体查询布局

  

  • rem

    设置html的页面文字大小，再通过子元素用rem控制

    

    em相对于父元素字体大小，1em为父盒子字体的px

  • 媒体查询

    @media screen and(min-width:540px) and(max-width:800px){
    
    }
    

    查询类型

    

    关键字

    

    媒体特性

    

    

  • less

    @color:pink;
    body{
    	background-color:@color;
    }
    

    变量命名规范：必须有@前缀，不包含特殊字符，不以数字开头，大小写敏感

    easy less插件自动编译新css文件

    • less嵌套

      less嵌套子元素样式直接写入父元素里

      

      嵌套a:hover

      

    • less运算

      

      运算符左右以空格隔开

      俩数运算单位不同以第一位单位为准，只有一个单位则以该单位为准

  另一种适配方式：flexible.js+rem

• 响应式

  • 布局容器划分大小

    

    .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，而且高度自动和父亲一样高

      列偏移：

      class="col-md-offset-4"4代表偏移的份数
      

      列排序：

      class="col-md-push-4"
      class="col-md-pull-4"
      

      响应式工具：

      

      与之相反的有visible-xs等等