今天測試忽然提了一個bug，關于position:fixed的問題，一般情況下使用并沒問題，當頁面出現表單時，由于彈出鍵盤，整個頁面會出現布局錯位問題，或者含有fixed的模塊會空白(ios11比較明顯)，經過幾個小時的各種嘗試，最后不得不放棄fixed的布局，重新采用flex布局，另外補充一句在移動端布局的時候能不用浮動盡量別用。

項目用的是sass,為了考慮兼容性，特意整理了一份flex的功能函數模塊/*

*?=========================================================

*?@?filename?:?flex.scss

*?@?explains?:?flex?layout?mixin;?目前支持flex,未做inline-flex

*?==========================================================

*/

//?----------------------------------

//?定義伸縮布局

@mixin?display-flex()?{

display:?-webkit-box;???/*?old?version?iOS?6-?Safari?3.1-6?*/

display:?-moz-box;??????/*?Firefox?19-?*/

display:?-ms-flexbox;???/*?IE10?*/

display:?-webkit-flex;??/*?Chrome?*/

display:?flex;??????????/*?New?version?*/

}

@mixin?flex-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;

}?@else?if?$value?==?'column'?{

-webkit-box-orient:?vertical;

-moz-box-orient:?vertical;

-ms-flex-direction:?column;

-webkit-flex-direction:?column;

flex-direction:?column;

}

}

@mixin?justify-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;

}?@else?if?$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

@mixin?align-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;

}

//?----------------------------------

//?設置子元素的顯示順序

@mixin?order($order)?{

-webkit-box-ordinal-group:?$order;

-moz-box-ordinal-group:?$order;

-ms-flex-order:?$order;

-webkit-order:?$order;

order:?$order;

}

//?----------------------------------

//?伸縮項目的伸縮比例

@mixin?flex($flex)?{

-webkit-box-flex:?1;

-moz-box-flex:?1;

-webkit-flex:?1;

-ms-flex:?1;

flex:?1;

}

//?多行

@mixin?flex-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;

}?@else?if?$value?==?'nowrap'?{

-webkit-box-lines:?single;

-moz-box-lines:?single;

-ms-flex-wrap:?nowrap;

-webkit-flex-wrap:?nowrap;

flex-wrap:?nowrap;

}

}

@mixin?justify-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:?1px?solid?#f60;

}

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

當內容欲出隱藏時，灰色區域可上下拖動

?content

?content

?content

?content

?content

?content

?content

?content

?content

sass處理兼容//根標簽

.warp{

@include?display-flex();

@include?flex-direction(column);

}

header{

height:50px;

}

.banner{

height:100px;

}

//滾動區域

section{

@include?flex(1);

overflow:?auto;

-webkit-overflow-scrolling:?touch;

}

關于flex的布局這是最基本的案例，詳情使用參考這里

總結

以上是生活随笔為你收集整理的css fix 手机端,移动端布局fixed问题解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。