課時1—佈局

時間 2019-11-11

標籤課時佈局简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>移動端頁面參考代碼模板</title>
 6     <!--說明：user-scalable=no是須要的，用戶是否能夠手動縮放，由於發現某些設備上僅僅有initial和maximum仍然沒法阻止縮放-->
 7     <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width"  name="Viewport"/>
 8     <!--touch-icon用於在ios中顯示桌面圖標-->
 9     <link href="http://img01.taobaocdn.com/tps/il/Tlzo51XxXfXXXeOHro-144-144.png"   rel="apple-touch-icon-precomposed"/>
10     <!--從桌面ico啓動ios Safari是否進入全屏狀態（App模式）yes|no    刪除默認的蘋果工具欄和菜單欄-->
11     <meta content="yes" name="apple-mobile-web-app-capable"/>
12     <!--ios在全屏狀態下的狀態欄模式  default | balck | black-translucent-->
13     <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
14     <!--ios設備上禁止將數字識別爲可點擊的tel link （撥號連接）-->
15     <meta content="telephone=no" name="format-detection"/>
16 
17   <!--用於設定網頁的到期時間，過時則必須到服務器上從新調用,content="-1"，網頁在任什麼時候候都不能被Cache存儲-->
18     <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
19 
20 </head>
21  <!--移動端版本兼容 -->
22  <script type="text/javascript">
23       var jsVer = 15;
24       var phoneWidth = parseInt(window.screen.width);
25       var phoneScale = phoneWidth/640;
26       var ua = navigator.userAgent;
27       if (/Android (\d+\.\d+)/.test(ua)){
28        var version = parseFloat(RegExp.$1);
29        // andriod 2.3
30        if(version>2.3){
31         document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
32        // andriod 2.3以上
33        }else{
34         document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
35        }
36        // 其餘系統
37       } else {
38        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
39       }
40  </script>
41  <!--移動端版本兼容 end -->
42 <!--safrai瀏覽器影藏地址欄-->
43 <script type="text/javascript">
44   window.addEventListener('load',function(){
45       setTimeout(function(){window.scrollTo(0,1);},100);
46   });
47 </script>
48 <!--safrai瀏覽器影藏地址欄 end-->
49 
50  <style type="text/css">
51     *{
52        -webkit-box-sizing:border-box;
53        -moz-box-sizing:border-box;
54        box-sizing:border-box;
55     }
56    
57     /*絕對定位佈局*/
58     .header,footer,.wrap-page{position: absolute;left: 0; right: 0;}
59     .header,.footer{ height: 44px; background-color: #fff; text-align: center;z-index: 900; line-height: 44px;}
60     .header{ top: 0;border-bottom: 1px solid #f00;}
61     .footer{bottom: 0; border-top: 1px solid #f00;}
62     /*給wrap-page設定高度而後實現滾動*/
63     .wrap-page{top: 44px; bottom: 44px; overflow-y:auto;-webkit-overflow-scrolling:touch;}
64     .page{
65       padding: 10px;
66     }
67     /*.page p{
68       margin-bottom: 10px;
69     }*/
70 
71  </style>
72 <body>
73 
74 <header class="header fixed-top"></header>
75 <!--二層header 如搜索框
76 <section class="header-sub"></section>-->
77 <footer class="footer fixed-bottom"></footer>
78 <!--內容-->
79 <div class="wrap-page">
80   <!--一個page一個頁面-->    
81   <section class="page"></section>
82   <section class="page"></section>
83 </div>
84 
85 
86 </body>
87 </html>

總體佈局javascript

移動端總體佈局氛圍上中下三部分，如圖：css

通常header和footer部分爲fixed定位，中間內容可滾動。html

常規結構：java

<header class="header fixed-top"></header>
<div class="wrap-page">
    <section class="page"></section>
    <section class="page"></section>
    ...

</div>
<footer class="footer fixed-bottom"></footer>

移動端頁面是單頁面特性，因此每一個page爲一個頁面，總體被wrap-page包裹，page內容能夠滾動，因此給wrap-page一個具體高度，使用原生-webkit-overflow-scrolling:touch;來實現滾動，固然對於不支持的，也能夠使用iscroll兼容，而iscroll一樣須要一個固定高度的容器來包裹能夠滾動的內容。ios

header和footer採用fixed定位，固定高度，所以wrap-page要設置padding-top和padding-bottom。web

絕對定位佈局

直接參考demo，關鍵在於設置wrap-page的top，bottom的距離爲header和footer的高度。瀏覽器

css代碼以下：服務器

.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;}

.header,.footer{
  height:44px;
  background-color: #fff;
  text-align: center;
  z-index:900;
  line-height:44px;}

.header{
  top: 0;
  border-bottom: 1px solid #f00;}

.footer{
  bottom: 0;
  border-top: 1px solid #f00;}

.wrap-page{
  top: 44px;
  bottom: 44px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;}

.page{
  padding: 10px;}

.page p{
  margin-bottom: 10px;}

這個佈局的缺陷在於滾動的時候地址欄不隱藏，safari瀏覽器能夠經過下面js代碼來隱藏地址欄，其餘瀏覽器經測試不能夠app

window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100);});ide

若是你實在要除掉瀏覽器的地址欄和工具欄，能夠設置meta標籤爲應用模式，參考新建空白頁面的其餘meta部分

<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">

flex佈局

能夠經過這個簡單的demo來測試：flex layout demo

設置body爲flex佈局，方向爲垂直方向，wrap-page的flex爲1。這個跟上面的絕對定位同樣，仍是滾動的時候地址欄不隱藏，safari一樣能夠經過js來搞定，其餘瀏覽器不能夠

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;}

.wrap-page {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;}

.header,.footer{
  height:44px;
  background-color: #fff;
  text-align: center;
  line-height:44px;
  position:relative;
  z-index:990;}

.header{
  border-bottom: 1px solid #f00;}

.footer{
  border-top: 1px solid #f00;}

.wrap-page{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;}

.page{
  padding: 10px;}

.page p{
  margin-bottom: 10px;}

總結

由於fixed定位，滾動的時候bug太多，特別是有表單元素的時候得慎用；而flex佈局兼容方面有必定問題，好像性能也不是很好，何況若是是在 body下面直接佈局的話，只有上中下這幾個元素還好，若是再添加上彈窗，panel什麼的子元素搞很差還有問題得深刻；因此選擇絕對定位相對來講仍是比較靠譜的。而優化的元素位置關係，由於國產的安卓手機太多，有些還不太支持，再加上隱藏的元素選擇器還有效，因此暫時不考慮。

最後咱們通常採用常規結構的絕對定位來佈局。

出處：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。