今天测试忽然提了一个bug，关于position:fixed的问题，一般情况下使用并没问题，当页面出现表单时，由于弹出键盘，整个页面会出现布局错位问题，或者含有fixed的模块会空白(ios11比较明显)，经过几个小时的各种尝试，最后不得不放弃fixed的布局，重新采用flex布局，另外补充一句在移动端布局的时候能不用浮动尽量别用。
项目用的是sass,为了考虑兼容性，特意整理了一份flex的功能函数模块/*
*=========================================================
*@filename:flex.scss
*@explains:flexlayoutmixin;目前支持flex,未做inline-flex
*==========================================================
*/
//----------------------------------
//定义伸缩布局
@mixindisplay-flex(){
display:-webkit-box;/*oldversioniOS6-Safari3.1-6*/
display:-moz-box;/*Firefox19-*/
display:-ms-flexbox;/*IE10*/
display:-webkit-flex;/*Chrome*/
display:flex;/*Newversion*/
}
@mixinflex-direction($value:row){
@if$value=='row'{
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-flex-direction:row;
-webkit-flex-direction:row;
flex-direction:row;
}@elseif$value=='column'{
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-flex-direction:column;
-webkit-flex-direction:column;
flex-direction:column;
}
}
@mixinjustify-content($value:center){
@if$value=='center'{
-webkit-box-pack:center;
-moz-box-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
justify-content:center;
}@elseif$value=='space-between'{
-webkit-box-pack:justify;
-moz-box-pack:justify;
-ms-flex-pack:justify;
-webkit-justify-content:space-between;
justify-content:space-between;
}
}
//----------------------------------
//侧轴对齐方式支持三版本通用属性为center,baseline,stretch
@mixinalign-items($align-items:center){
-webkit-box-align:$align-items;
-moz-box-align:$align-items;
-ms-flex-align:$align-items;
-webkit-align-items:$align-items;
align-items:$align-items;
}
//----------------------------------
//设置子元素的显示顺序
@mixinorder($order){
-webkit-box-ordinal-group:$order;
-moz-box-ordinal-group:$order;
-ms-flex-order:$order;
-webkit-order:$order;
order:$order;
}
//----------------------------------
//伸缩项目的伸缩比例
@mixinflex($flex){
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
//多行
@mixinflex-wrap($value:wrap){
@if$value=='wrap'{
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-ms-flex-wrap:wrap;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}@elseif$value=='nowrap'{
-webkit-box-lines:single;
-moz-box-lines:single;
-ms-flex-wrap:nowrap;
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
}
@mixinjustify-space-between(){
-webkit-box-pack:justify;
-moz-box-pack:justify;
-ms-flex-pack:justify;
-webkit-justify-content:space-between;
justify-content:space-between;
}
重构布局
这里用行内css处理了，方便运行代码。html>
/>
flex
*{
margin:0;
padding:0;
list-style:none;
}
html,
body{
height:100%;
overflow:hidden;
}
.wrap{
height:100%;
display:flex;
flex-direction:column;
}
.wrap.page-header-bg{
background:#000;
width:100%;
height:130px;
background-size:cover;
z-index:999;
}
.banner{
width:100%;
height:130px;
background:#f60;
}
.wrap.section{
flex:1;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
input{
border:1pxsolid#f60;
}
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
当内容欲出隐藏时，灰色区域可上下拖动
content
content
content
content
content
content
content
content
content
sass处理兼容//根标签
.warp{
@includedisplay-flex();
@includeflex-direction(column);
}
header{
height:50px;
}
.banner{
height:100px;
}
//滚动区域
section{
@includeflex(1);
overflow:auto;
-webkit-overflow-scrolling:touch;
}
关于flex的布局这是最基本的案例，详情使用参考这里
