移動端布局的心得

標籤：item   function   play   tom   詳細   mil   沒有   對象   執行   

1.字型大小 font-sizepx/em/rem

• px像素
• em:根據父級的字型大小有關,1em表示是父級字型大小一致
• rem:根據html標籤的字型大小有關,1rem表示和html標籤字型大小一致,預設16px,
• rem:設定 nrem.表示把字型大小設定成和html標籤的字型大小n陪,如果html沒有設定則預設font-size:16px;

2.自訂字型：字型名字2字型src:url+format

<style>     @font-face{font-family:"demo字型";src:url("路徑地址") fromat("truetype"‘);       }     .customFont{       font-family:"demo字型";     }</style><p>one</p><p class=‘customFont‘>two</p>

3.  置中適配的問題

//第一種方法.box{

//先寫舊版flex,在適配新版

  display: -webkit-box;

//設定水平置中

  -webkit-box-pack: center;

//設定垂直置中

  -webkit-box-align: center;

  //適配新版flex

  display: -webkit-flex;;

  display: flex

//設定水平置中

  -webkit-justify-content: center;

  justify-content: center;

//設定垂直置中

  -webkit-align-items: center;

  align-items: center;

/* 在移動web中,使用flex布局的時候,為了讓渲染效果更好,先寫舊版flex,再適配新版 */

  } 第二種：calc是css3的屬性，但是在安卓UC瀏覽器中相容不好，一般不再移動web中使用 父級設定relative.son{  position: absolute;  left: -webkit-calc(50% - 50px);  left: -moz-calc(50% - 50px)  left: calc(50% - 50px)  top: -webkit-calc(50% - 50px);//需要注意的是，運算子前後都需要保留一個空格；  top: -moz-calc(50% - 50px)  top: calc(50% - 50px)} 第三種：父級設定relativebox{  position: absolute;  width: 100px;  height: 100px;  left:50%;  top:50%;

-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
transform: translate(-50% -50%);
}

 第四種：box{  position: absolute;  width: 100px;  height: 100px;  left:50%;  top:50%;  margin-top:-50px;  margin-left:-50px;  }

注意：在定位的時候，一定不要忘了寫top、left、right、bottom的值。雖然在有些手機上不寫樣式不會亂掉，看起來沒問題。但是為了確保萬一，一定要寫上。不要犯這種低級錯誤。

之前在寫移動端的頁面的時候就時忘了寫這幾個屬性的值，而是直接用margin-left、margin-top直接定位，結果在發現在蘋果手機上出現了樣式排版位移的問題。

  position: absolute/fixed/relative;     left: 0;     right: 0;     bottom: 0;     top: 0;

4.重點說說彈性布局flex的相容問題:

彈性布局雖然好用，但相容性並不太好，除了瀏覽器實現有差異外,PC與移動端也有差異。

display: flex 與 display: box都用於彈性布局。display: box是2009年的命名，display: flex是2012之後的命名。但display: flex不能完全的向後相容，有些瀏覽器不支援。（display: box 很少用）

div{//2009後的瀏覽器生效 display:-webkit-box;//2011後的瀏覽器生效 display:-webkit-flex;//2012後的瀏覽器生效 display:flex;}

display:flex

PC端：Chrome和Firefox支援度都很好，IE不支援。 

移動端：

• iOS Safari支援，UC支援，瀏覽器不支援
• Android 原生瀏覽器 UC 都不支援

display:box

PC端：Chrome和Firefox支援度都很好，IE不支援。 

 移動端：

• iOS Safari支援，UC支援，瀏覽器不支援
• Android 原生瀏覽器 UC 支援

總結起來：IE都不支援，因此這個技術用於移動端是比較理想的，因為移動端的瀏覽器核心基本為webkit。

.container{display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */display: -moz-box; /* Firefox 17- */display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */display: -moz-flex; /* Firefox 18+ */display: -ms-flexbox; /* IE 10 */display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}

5.文本溢出隱藏顯示省略符號

單行文法：

.text{  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;    }

多行文法：

.text {  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}

直接用css屬性設定(只有-webkit核心才有作用)移動端瀏覽器絕大部分是WebKit核心的，所以該方法適用於移動端；

• -webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
• display: -webkit-box 將對象作為Auto Scaling盒子模型顯示 。
• -webkit-box-orient 設定或檢索伸縮盒對象的子項目的相片順序 。
• text-overflow: ellipsis 以用來多行文本的情況下，用省略符號“…”隱藏超出範圍的文本

6. 移動web觸動事件

6.1on和addEventListener

1.寫法上addEventListener中的相應事件不用加on首碼(onclick-->click)

2.on事件多次添加,之後執行最後一次,addEventListener事件每次添加都會生效

3.addEventListener:執行順序是冒泡規則,:從小到大(從兒子到祖宗)

4.addEventListener:事件捕獲順序規則:從大到小(從祖宗到兒子)

addEventListener的參數講解:element.addEventListener(event, function, useCapture)參數1:必須,字串,指定事件名稱,不需加on參數2:必須,function,指定要事件觸發時執行的函數參數3:可選,布爾值,指定事件是否捕獲或者冒泡階段執行true:事件控制代碼在捕獲階段執行false:預設,事件在冒泡階段執行這篇文章講的很詳細兩者的區別  6.2使用addEventListener添加事件監聽 addEventListener(‘touchstart‘,function(e){})表示手觸碰到螢幕是觸發,不管當前有多少只手指 addEventListener(‘touchmove‘,function(e){})表示手觸動在螢幕上滑動時觸發e.preventDefault()來阻止預設觸發的頁面滾動事件 addEventListener(‘touchend‘,function(e){})表示手離開螢幕時觸發 

addEventListener(‘touchmove‘,function(e){console.log(e.target); //表示手觸動的當前元素對象console.log(e.touches); //頁面上的所有觸摸點console.log(e.touches[0]); //touches[0]觸摸點的第一個元素有許多可以使用的參數})

 event事件的參數targetTouches 目標元素的所有當前觸摸點changedTouches 頁面上最新更改的所有觸摸點touches 頁面上的所有觸摸點touches[0]裡面有以下屬性在每個觸摸點中我們可以擷取以下屬性- clientX:觸摸目標在視口中的X座標。 - clientY:觸摸目標在視口中的Y座標。 - pageX：觸摸目標在頁面中的x座標。 - pageY：觸摸目標在頁面中的y座標。 - screenX:觸摸目標在螢幕中的x座標。 - screenY:觸摸目標在螢幕中的y座標。 - target:觸摸的DOM節點座標

移動端布局的心得